CSS Gradient Generator
Build a gradient visually and copy the CSS.
CSS Gradient Generator builds linear, radial and conic gradients with as many colour stops as you want, draggable on a track, with control over angle, position, shape and interpolation colour space. It outputs clean CSS and can export the result as a PNG.
Loading CSS Gradient Generator…
Runs entirely on your device. No file or text you enter here is uploaded. How to verify it.
How to use CSS Gradient Generator
- Choose a gradient type and add colour stops.
- Drag the stops and set the angle or position.
- Copy the CSS, or export a PNG.
Questions about CSS Gradient Generator
Why does my gradient look muddy in the middle?
Because sRGB interpolation passes through desaturated greys between complementary hues. Interpolating
in oklch keeps the midpoint vivid — the tool offers that and shows both side by side.How do I make a smooth fade to transparent?
Fade to the same colour with zero alpha, not to
transparent. In several engines transparent means transparent black, which produces a grey haze in the middle of the fade.Can I create a mesh gradient?
Not directly, but layering several radial gradients with transparency approximates one closely, and the tool can stack layers for exactly that.
What size is the exported PNG?
1200 × 630 pixels, the usual social preview size. Linear and radial gradients are redrawn on a canvas at that size from the same colour stops. A conic gradient has no equivalent in the canvas gradient API, so it exports as its linear form rather than as a cone — take a screenshot if you need the cone itself.
Will a CSS gradient work in an email?
Often not. Outlook on Windows in particular drops CSS gradients and falls back to whatever background colour is set behind them. For email, export the PNG, use it as an image, and keep a solid background colour underneath as the fallback.
Is CSS Gradient Generator really free, with no limits?
Yes. There is no account, no daily cap, no file-size tier and no watermark, because there is no server cost to recover. The site is funded by clearly disclosed partner recommendations on the Partners page, never by metering the tools.
Are my files or text uploaded when I use CSS Gradient Generator?
No. Everything is processed by JavaScript running in your browser, on your device. You can verify it: open your browser's developer tools, switch to the Network tab, and use the tool. You will see no request carrying your data — because there is nowhere for it to go.