Gradient generator

Build CSS gradients and copy the declaration

Interpolate

Angle90deg

Colour stops

Stop 1 colour
Position %
Stop 2 colour
Position %

Preview

CSS declaration

background-image: linear-gradient(90deg in oklch, #0000ff 0%, #ffff00 100%);

Interpolation space, side by side

in oklch

in srgb

Load the blue-to-yellow preset to see the difference at its starkest. In sRGB the midpoint is #808080 — a componentwise average of two opposed hues is their numeric mean, and that mean is grey. OKLCH interpolates lightness, chroma and hue separately and takes the shorter hue arc, so chroma survives the crossing. Both strips here are drawn from stops computed in this tab, so what you are comparing is the maths and not one engine's version of it.

Scope

Kept deliberately narrow: one gradient at a time, circle radial shapes only, no explicit sizing keywords (closest-side and friends), no repeating variants, no transition hints, and no longer hue / increasing hue interpolation methods. Each is a real CSS feature; each also multiplies the control surface for something you would hand-edit once in the declaration anyway.