Build linear and radial CSS gradients with a live preview.
Tip: use samples, upload, copy, download, and send-to actions inside the workspace where available.
CSS Gradient Generator is a free, browser-based tool that helps you produce ready-to-use output in seconds. Build linear and radial CSS gradients with a live preview. It's built for speed and privacy: Everything runs locally in your browser — your data is never uploaded to a server. No sign-up, no installs, and no daily limits.
Generate a sample or helper artifact, then copy it into the workflow that needs it.
Review the preview, copy or download the result, and keep everything local in your browser.
CSS Box Shadow Generator: Design CSS box-shadows visually and copy the code.
Open toolColor Palette Generator: Generate shades and harmonies from a base color.
Open toolCSS angles start at 0° pointing up and rotate clockwise, so 180° runs top-to-bottom.
Stops are sorted by position when the CSS is generated, so you can drag them past each other freely. A minimum of two stops is required — a one-stop gradient is a solid colour.
background: linear-gradient(135deg, #6d28d9 0%, #db2777 100%);
:root {
--gradient: linear-gradient(135deg, #6d28d9 0%, #db2777 100%);
}
.hero {
background: var(--gradient);
}bg-[linear-gradient(135deg,_#6d28d9_0%,_#db2777_100%)]
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g" x1="14.645%" y1="14.645%" x2="85.355%" y2="85.355%">
<stop offset="0%" stop-color="#6d28d9" />
<stop offset="100%" stop-color="#db2777" />
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#g)" />
</svg>rgba(); fully opaque stops stay as short hex, which keeps the declaration readable.transparent passes through grey in most browsers.