CSS Gradient Generator
Build a gradient visually and copy production-ready CSS. Linear, radial and conic, with as many stops as you need and a live preview.
The workhorse
Runs along an angle. Backgrounds, buttons, overlays — most of what you will build.
From a point
Spreads outward from a centre, which suits glows, spotlights and soft vignettes.
Around a centre
Sweeps around a point. What you want for pie charts, colour wheels and angular metallic sheens.
The muddy middle
Interpolating in sRGB passes through the midpoint of the RGB values, which for complementary colours is a dead grey. A third stop keeps saturation up through the transition.
Conic gradients need a fallback in older browsers. Support is broad now, but if you target anything older, ship a flat colour or a linear gradient underneath.
Nothing is uploaded. The CSS is generated in your browser and copied straight to your clipboard.
Frequently asked questions
Is this free?
Yes — no account, no limit, no watermark on the output.
Does anything get uploaded?
No. The gradient is rendered and the CSS generated entirely in your browser.
Will the CSS work everywhere?
Linear and radial gradients work in every browser in current use. Conic gradients are widely supported but worth a fallback if you support older versions.
Why does my gradient look grey in the middle?
Because sRGB interpolation passes through the midpoint of the two RGB values, and for complementary colours that midpoint is desaturated. Add a stop that holds saturation through the transition.
Can I match a gradient to a palette?
Yes — build the palette in the colour palette generator first, then paste those hex values in as stops.
Related tools
Generate the colours with the palette generator, check any text sitting on the gradient with the contrast checker, or see all five utilities we host. For full design software, browse the directory of 473 tools.