Build linear, radial and conic gradients with unlimited colour stops, and see the difference real colour-space interpolation makes — most tools only offer the muddy default.
Browse the CSS lessonsClick the bar to add a stop. Drag a handle to move one.
A gradient needs at least two stops.
sRGB vs OKLCH — same stops, real browser rendering
sRGB is what every gradient tool defaults to: colours blend in a straight line through RGB space, which between two saturated, very different hues (say orange and blue) passes through a dull, muddy grey. OKLCH blends through a perceptual colour space instead — the same two colours pass through vivid, in-between hues rather than grey. Both renders here are the browser doing the actual interpolation via the CSS `in oklch` syntax, not a simulation.
If the OKLCH preview looks identical to the sRGB one, this browser may not support the `in oklch` interpolation syntax yet — it falls back silently.
Both previews below always show sRGB and OKLCH side by side — this only picks which one goes into the code you copy.
.gradient {
background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}Radial and conic gradients with many stops cost more paint time than a two-stop linear one — fine for one card, worth checking at scale.