FREE TOOL · OKLCH INTERPOLATION
CSS Gradient Generator — OKLCH, Linear, Radial, Conic
Build any CSS gradient with perceptually uniform OKLCH interpolation. Compare against legacy sRGB side by side, then copy the CSS, Tailwind v4, SCSS, or SVG.
Presets
Code
CSS
background: linear-gradient(135deg in oklch, #7C3AED 0%, #EC4899 100%);
Tailwind arbitrary
bg-[linear-gradient(135deg in oklch, #7C3AED 0%, #EC4899 100%)]
SCSS
$gradient: linear-gradient(135deg in oklch, #7C3AED 0%, #EC4899 100%);
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="g-1778840789116" x1="14.6%" y1="14.6%" x2="85.4%" y2="85.4%">
<stop offset="0%" stop-color="#7C3AED" />
<stop offset="100%" stop-color="#EC4899" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#g-1778840789116)"/>
</svg>Why OKLCH
The middle of a gradient is where sRGB falls apart.
Both gradients below go from amber to blue. Same start, same end. The only thing different is the interpolation color space. sRGB walks through a desaturated mud-gray midpoint; OKLCH walks through clean colors the whole way.
sRGB
Notice the gray-brown sag in the middle — that is sRGB averaging the channels and producing a hue that exists in neither end color.
OKLCH
OKLCH interpolates in a perceptually uniform space. The midpoint stays saturated and the path between hues reads as a smooth color change.
TL;DR
Default to OKLCH for any gradient between two saturated colors. Use sRGB only when you need to support browsers older than Safari 16.4, Chrome 111, or Firefox 113 — and even then, provide it as a fallback under @supports not (background: linear-gradient(in oklch, red, blue)).
Linear vs Radial vs Conic — when each one fits
Three CSS gradient functions, three different jobs. Picking the wrong one is the most common mistake in gradient design.
Linear
Use for hero backgrounds, button surfaces, large sweeping color washes, and anywhere you want a clean directional transition. The default for 90% of work.
Radial
Use for spotlight effects, soft vignettes, glowing buttons, depth in dark mode. Anywhere you want attention to land at a point and fade outward.
Conic
Use for color wheels, loading spinners, progress rings, or stylized hue showcases. Rare in production UI — but exactly right when the design calls for it.
Three steps to a clean gradient
Pick a type and stops
Start with linear unless you have a specific reason to use radial or conic. Two stops is the minimum, four is usually enough — adding more colors rarely improves the look.
Leave OKLCH on
OKLCH is the default for a reason. Toggle to sRGB only when you actively need it (legacy browser support); use the compare mode to confirm the OKLCH version really does read better.
Copy production-ready code
CSS pastes into any stylesheet. Tailwind arbitrary works in v4 with the in oklch syntax. SCSS gives you a variable. SVG gives you an embeddable gradient for icons or hero backgrounds.