CSS color recipe
Gradients in OKLCH Vivid all the way across, without the grey middle
A gradient blends its stops in sRGB unless you say otherwise, and opposite hues meet in a dull grey. linear-gradient(to right in oklch, …) walks around the hue wheel instead, so the middle keeps its color.
- Baseline
- Newly available
- First versions
- Chrome 111 · Firefox 127 · Safari 16.2
- Tested
- 3 of 3 engines
Live example
The recipe, running
Left: the CSS below, as your browser runs it. Right: the same CSS as a browser without the feature reads it, so you see exactly what the fallback gives.
Turn on JavaScript to see whether your browser supports it; the examples work either way.Your browser supports it, so the left example runs the modern path.Your browser does not support it yet, so both examples show the fallback.
In each example the top bar is the default, blended in sRGB, and the bottom bar is the same two colors in OKLCH. Without the feature, the bottom bar is the sampled fallback.
The CSS
Copy it as it is
This is the exact CSS the example runs. Fallbacks come first; the modern values follow, so each browser keeps the last line it understands.
gradient-interpolation.css
/* Default: interpolated in sRGB, which greys out in the middle. */
.ramp--srgb { background: linear-gradient(to right, #0058FF, #FFD400); }
/* Stops sampled along the OKLCH path keep older browsers close. */
.ramp--oklch {
background: linear-gradient(to right, #0058FF, #0096B7 25%, #00BBA2 50%, #7CD846 75%, #FFD400);
background: linear-gradient(to right in oklch, #0058FF, #FFD400);
}
.ramp { height: 44px; border-radius: 8px; }
.ramp + .ramp { margin-top: 10px; }How it works
What each part does
The fallback samples the OKLCH path. Three extra stops at 25%, 50% and 75%, worked out along the same OKLCH route, give older browsers a ramp close to the real one.
Shorter hue by default. OKLCH takes the shorter way around the wheel; add
longer hueto go the long way.Two declarations are enough. The value has no
var(), so a browser that cannot readin oklchkeeps the sampled version.
Browser support
Where it runs
First version of each browser with the feature, from the web-features project and MDN’s browser-compat-data. “No” means not supported yet.
- Gradient interpolationNewly availableBaseline newly available since 11 June 2024: every core browser has it, but older versions in use may not.
| Browser | Gradient interpolation |
|---|---|
| Chrome | 111 |
| Chrome for Android | 111 |
| Edge | 111 |
| Firefox | 127 |
| Firefox for Android | 127 |
| Safari | 16.2 |
| Safari on iOS | 16.2 |
Support reviewed on against web-features 98723fd and browser-compat-data 3b28abe.
Tested
Tested in three engines
| Engine | Version | Supported | As written | Fallback |
|---|---|---|---|---|
| Chromium | 147.0.7727.15 | Yes | Pass | Pass |
| Firefox | 148.0.2 | Yes | Pass | Pass |
| WebKit | 26.4 | Yes | Pass | Pass |
Run on in Chromium 147.0.7727.15, Firefox 148.0.2 and WebKit 26.4, with Playwright.
Accessibility
Measured, not assumed
The midpoint of the sRGB ramp has an OKLCH chroma of 0.041; the OKLCH ramp’s midpoint keeps 0.130.
References
Go to the source
- CSS Images Module Level 4: color interpolationwww.w3.org
- CSS Color Module Level 4: interpolationwww.w3.org
- web-features at 98723fdgithub.com
- MDN browser-compat-data at 3b28abegithub.com