CapyTone · tool no. 11
.
Linear, radial or conic, blended in Oklab or OKLCH, copied as CSS that works everywhere.
Make smooth linear, radial or conic CSS gradients blended in Oklab or OKLCH, and copy the CSS with a fallback for older browsers.
Updated · by Unfolding Dimensions
The guide
How to make a smooth CSS gradient
- Step 1
Pick two or three colours and a shape — linear, radial or conic.
- Step 2
Choose the colour space to blend in: Oklab, OKLCH, OKLCH on the longer hue arc, or sRGB.
- Step 3
Copy the CSS. It comes with a fallback for browsers that don't support colour-space interpolation yet.
A plain CSS gradient blends in sRGB, which is why blue to yellow passes through a dull grey. Blending in Oklab or OKLCH keeps the middle bright and even.
The output uses the modern `in oklab` gradient syntax, plus a fallback built from many hex stops sampled along the same blend, so browsers that would drop the modern line still show the same gradient.
Questions
Why does my gradient look muddy in the middle?
It's blending in sRGB. Switch to Oklab or OKLCH and the midpoint keeps its brightness and colour.
Oklab or OKLCH?
Oklab gives the smoothest, most neutral blend. OKLCH travels around the colour wheel, so it keeps more saturation and can pass through intermediate hues.
Does the CSS work in every browser?
Current browsers support the modern syntax; the hex-stop fallback covers the rest.
Is anything stored?
No. Gradients are made in your browser and nothing is saved.