CSS gradient generator

What is a CSS gradient generator?

A CSS gradient generator turns two colours into a `background-image` declaration you can paste into a stylesheet. You pick the colours, the shape — linear, radial or conic — and the direction, and it writes the rule. Nothing is exported as an image: a CSS gradient is drawn by the browser at whatever size the element happens to be, so it stays sharp and costs no bandwidth.

The part most generators leave out is the interpolation space. CSS Color 4 lets a gradient say which colour space the browser should travel through — `linear-gradient(90deg in oklch, ...)` — and the choice changes the middle of the gradient far more than the angle ever will. It has been available in every mainline browser since May 2023.

This generator makes that choice visible instead of picking one for you. Your two colours are rendered in all three spaces at once, each with a measurement of what it costs.

How to use the gradient generator

1. Choose your two colours. Use the swatch to pick one, or type a hex value directly. The preview and the CSS update as you go, with no button to press.
2. Pick the shape and the interpolation space. Linear, radial or conic, with an angle slider for the first two. Then sRGB, Oklab or Oklch — the comparison panel below shows all three for your colours regardless, so you can see what you are choosing between.
3. Copy the declaration. You get a complete `background-image:` rule with the interpolation space named explicitly, even for sRGB where it is the default, because a rule that gets pasted somewhere and read later should say what it does.

“Use oklab for gradients” is half right

The standard advice is that sRGB gradients go muddy through the middle and Oklab fixes it. The first half is true. The second half is backwards, and it is easy to measure.

Take blue and yellow. Interpolated in sRGB the midpoint is #7F7F7F — not muddy, literally grey, with a measured chroma of zero. Across 15,000 random saturated pairs of near-opposite hue, sRGB loses a median 75.8% of the endpoints' colour at the midpoint, and 13.73% of those midpoints come out effectively grey. Oklab does not fix this. It makes it worse: a median loss of 83.3%, with 22.99% of midpoints grey — nearly twice as many.

The reason is structural rather than a quirk. sRGB and Oklab are both rectangular spaces, so interpolating means drawing a straight line between two points, and the straight line between two opposite hues passes through the neutral axis in the middle. Oklch is polar: it interpolates a hue angle instead, so it never has to cross the middle at all. Measured on the same 15,000 pairs it loses 14.6%, and grey midpoints happen 0.00% of the time.

So what is Oklab actually for? An even ramp of perceived lightness, where it wins decisively. Over 15,000 random pairs, the worst deviation from a straight lightness ramp is a median 8.60% in sRGB and 0.70% in Oklab — better than tenfold — and at the 90th percentile it is 44.68% against 2.53%. That is the banding you see in a long sRGB gradient, and Oklab is the right answer to it.

Two complaints, two different fixes, and the advice that solves one makes the other worse. Oklch sits in between on lightness (a median 1.25%) while keeping the colour, which is why this page defaults to it — but the panel shows all three because the right answer depends on your two colours, not on a rule of thumb.

Honest limitations

The preview is real CSS. The browser does the interpolation, so what you see is what your visitors get, and this page never has to claim its own rendering matches the browser's. The comparison strip is the exception: those three bars are drawn from 21 computed stops so the spaces can be compared even on a browser that predates the syntax, which means they are a close approximation of the smooth version rather than the smooth version itself.

This generator takes two colour stops, not an arbitrary list. That is deliberate — the interpolation question is about what happens between a pair, and the measurements above are only defined for a pair. If you need a multi-stop gradient, the CSS syntax accepts more stops in exactly the same form; the space keyword works the same way.

The figures on this page come from random colour pairs, which is the fair way to compare three spaces but is not how anyone chooses colours. Your own pair may behave quite differently, and that is the whole reason the panel measures yours rather than quoting an average at you. A pair of similar hues barely differs between spaces; two opposite hues differ enormously.

Chroma and lightness here are measured in Oklab, which is a choice that flatters Oklab's lightness result by construction — it is being scored on its own scale. It is also the scale CSS itself now uses, and the chroma result runs against Oklab rather than for it, so the bias does not explain the finding.

The colour conversions are checked against an independent implementation of the same specification over 20,000 colours, agreeing to better than one part in a million, alongside 26 assertions covering the round trips, the shorter-hue rule and the published figures above.

Why is it free?

Everything here is arithmetic and a `style` attribute, running in your browser as you type. No colours are uploaded, there is no account, and there is no export limit — the output is three lines of CSS you could have typed yourself.

There is also no watermark, which is not much of a promise for a gradient, and no paid tier holding the comparison panel back — that panel is the reason the page exists.