Gradient Generator
Linear, radial and conic gradients with a choice of interpolation space. Blend in OKLCH to remove the grey dead zone that sRGB gradients suffer from.
.hero {
/* sRGB fallback for older engines */
background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%);
/* Perceptual interpolation */
background: linear-gradient(90deg in oklch shorter hue, oklch(0.585 0.204 277.1) 0%, oklch(0.797 0.134 211.5) 100%);
}The grey dead zone
A CSS gradient from blue to yellow interpolates straight through the middle of the RGB cube, and the midpoint of that line is a desaturated grey. Interpolating in OKLCH instead travels around the hue circle at constant colorfulness, which is what a designer means by “blend these two colors”.
Hue paths
For polar spaces you can choose which way around the wheel the blend travels. shorter hue is the default and usually right; longer hue sweeps the opposite way and is a cheap way to produce a multi-hue rainbow ramp from just two stops.
Shipping gradients safely
Declare the plain sRGB gradient first and the OKLCH version immediately after. Engines that do not understand the interpolation keyword discard the second declaration and keep the first — no feature query needed.
Frequently asked questions
- Why do OKLCH gradients look better than default CSS gradients?
- Browsers interpolate gradients in sRGB by default, which passes through desaturated grey when blending complementary hues. Interpolating in OKLCH keeps chroma up across the whole ramp, so blue-to-yellow no longer has a muddy middle.
- How do I set the gradient interpolation space in CSS?
- Add `in oklch` after the direction: linear-gradient(to right in oklch, blue, yellow). For hue-based spaces you can also pick a hue path such as `in oklch longer hue`.
- Is `in oklch` safe to use in production?
- Yes, gradient interpolation spaces are widely supported in current browsers. Older engines simply ignore the space and fall back to sRGB interpolation, which still renders a valid gradient.
- What are gradient color stops used for in a design system?
- Keep gradients as tokens (for example --gradient-brand) rather than repeating them in components. That way you can retune the ramp once and every hero, badge and chart updates.
Related tools
Harmony-based palettes generated in OKLCH with locking, reordering and instant copy.
HEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLAB, OKLCH, CMYK and Display-P3 in one view.
Experiment with color-mix(), light-dark(), contrast-color() and relative color syntax.