CSS Gradient Generator

Why interpolate in OKLCH?

A gradient blends two or more colors by walking from one to the next. The catch is which color space it walks through. The old default is sRGB, where the numbers are not perceptually even, so the midpoint of, say, blue to yellow dips through a dull, dark, slightly grey patch. That is the famous gradient “dead zone”.

Modern CSS lets you choose the path with in <color-space>. OKLCH and OKLab are perceptually uniform, so lightness changes smoothly and the mid-tones stay vivid. The comparison strip above shows the same stops both ways. For most UI gradients, in oklch is the better default; switch back to in srgb only when you specifically want the legacy look.

Hue path

Polar spaces (OKLCH, HSL, LCH) treat hue as an angle, so there are two ways round the color wheel. Shorter takes the short arc (the usual choice); longer sweeps the long way for a rainbow effect; increasing and decreasing force a direction. Rectangular spaces (OKLab, sRGB, Lab) have no hue angle, so this control is hidden for them.

About the fallback

Browsers before 2023 ignore in oklch and fall back to sRGB. With the fallback box ticked, the tool emits a first background line built from explicit sRGB color stops sampled along the OKLCH path, then the modern one-liner on the line below. Newer browsers use the second line; older ones keep the first, so the gradient looks close everywhere. Transparency in the fallback is interpolated straight (not premultiplied), so a fade to fully transparent can differ slightly from the native render.