CSS gradient generator

Build a linear, radial or conic gradient from up to eight stops, copy the CSS with an sRGB fallback, and export a PNG or SVG.

How to Copy the CSS

1
Pick your colors and stop positions
Start from two stops and add up to eight. Every stop takes a typed color value and a typed position in per cent, so you can set exact numbers instead of nudging a handle with the mouse.
2
Choose linear, radial or conic
Set the angle for a linear or conic gradient, the shape and centre for a radial one, and whether the whole thing repeats. The preview updates immediately.
3
Copy the CSS or download a PNG
The CSS comes as two declarations: an sRGB fallback and the modern interpolated version above it. You can also export the same gradient as a PNG at any size up to 4096 pixels, or as an SVG.

Why interpolate in OKLCH

A gradient from blue to yellow in plain sRGB passes through a dull grey in the middle. That is not a bug in your browser: averaging red, green and blue channels componentwise cancels out the chroma exactly where the eye expects a clean green. OKLCH is a perceptual space, so the same two endpoints produce a midpoint that stays saturated and a ramp whose brightness climbs evenly. Modern CSS lets you say which space to interpolate in, as in `linear-gradient(90deg in oklch, ...)`, and this generator defaults to it, with oklab, sRGB and HSL available when you want the older look.

Why the fallback matters more than it looks

A browser that does not understand `in oklch` does not ignore that one word; it throws away the entire declaration. Without a fallback, the result is not a slightly different gradient but no gradient at all, and whatever background colour sits underneath shows through. So the copied CSS always contains two `background-image` lines. The first is the fallback: sixteen intermediate stops computed here in your chosen space and written out as plain sRGB hex, which approximates the same curve closely enough that most people cannot tell them apart. The second is the modern one-liner, which any capable browser applies on top.

Repeating gradients and the conic special case

A repeating gradient tiles the stop sequence over and over, which only works if the last stop sits below 100%. Otherwise there is nothing left over to repeat, and the result looks identical to the plain version. That case is caught before you copy anything. Conic gradients have their own limitation on export: SVG 1.1 has no conic gradient element at all, so the SVG button reports that and points you at the PNG, which is drawn as 720 half-degree wedges for compatibility with older Safari.

Everything is computed in this tab

Colour interpolation, the CSS text, the SVG markup and the PNG are all produced locally in JavaScript and canvas. Nothing about your gradient is uploaded, and no image is sent anywhere to be rendered. Close the tab and nothing is left behind.

Frequently asked questions

Why interpolate a gradient in OKLCH?

Because sRGB interpolation desaturates the middle of a gradient between distant hues, producing a grey band. OKLCH is perceptually uniform, so the midpoint keeps its chroma and the brightness ramp looks even.

Why do I need the fallback line?

A browser that does not support the `in <space>` syntax discards the whole declaration, not just the unknown part. The fallback is a plain sRGB approximation written first, so those browsers still get a gradient.

How do I make a repeating gradient?

Turn on the repeating option and move the last stop below 100%, for example to 20%. The stop sequence then tiles across the element. With the last stop at 100% there is nothing to repeat, and you are told so rather than getting a silently identical result.

Why is there no SVG for a conic gradient?

SVG 1.1 defines linear and radial gradients only; there is no conic element. Faking one with hundreds of wedges would produce a file nobody could edit, so the SVG export is refused for conic and the PNG is offered instead.

Can I make a gradient that fades to transparent?

Yes. Use a color notation that carries alpha, such as an eight-digit hex or rgba(), for the stop you want to fade out. Both the CSS and the PNG preserve the transparency.

What size should I download a background at?

For a full-screen background, 1920 pixels wide is usually plenty, and gradients compress extremely well. Anything above 2048 is only worth it for print. If you are using it on the web, prefer the CSS: it is a few hundred bytes and scales to any size.

Does Safari support these gradients?

Safari 16.4 and later understand interpolation spaces. Older versions fall back to the sRGB line, which is exactly why it is included. Conic gradients in CSS are supported from Safari 12.1, and the PNG export draws them as wedges so even older versions render correctly.