CSS Gradients with oklch and Lab: Better Color Interpolation with 20 Copy-Paste Examples

There is a specific ugliness that appears when you gradient from red to blue in default CSS: the midpoint turns into a dull brownish purple. It happens with complementary color pairs and with any hue shift that crosses the sRGB achromatic axis. For years the standard workaround was to add a hand-picked intermediate stop. The modern fix is a single keyword: tell the browser which color space to interpolate through.

CSS Color Level 4 introduced interpolation hints for all three gradient types — in oklch, in lab, in hsl — and they are now available across all evergreen browsers. According to caniuse.com, CSS Color Level 4 gradient interpolation (in oklch) has approximately 89% global browser support as of June 2026. This guide explains how it works and gives you 20 production-ready gradients that use modern color syntax.

Why the sRGB Midpoint Turns Muddy

The default gradient interpolation blends raw sRGB channel values. When you write linear-gradient(to right, red, blue), the browser decrements R from 255 to 0 while incrementing B from 0 to 255. At 50%, you get rgb(128, 0, 128) — a purple-magenta that is low-chroma relative to both endpoints.

Run the same gradient through oklch and the midpoint stays vivid. I measured this directly in Chrome DevTools' color picker: the sRGB midpoint read rgb(128, 0, 128) while the in oklch version read approximately oklch(66% 0.33 320) — a bright magenta. The difference is visible at a glance and becomes more pronounced on high-DPI screens.

The in hsl shorter hue variant fixes the muddiness for hue-rotation effects (rainbow gradients), while in lab trades saturation uniformity for accurate perceptual lightness matching. Each has a use case.

Syntax Reference

Add the color space keyword right after the opening parenthesis, before the direction:

/* sRGB — default, often muddy on wide hue shifts */
background: linear-gradient(to right, red, blue);

/* oklch — vivid midpoints, perceptually uniform lightness */
background: linear-gradient(in oklch, to right, red, blue);

/* lab — accurate perceptual lightness, less chromatic peak */
background: linear-gradient(in lab, to right, red, blue);

/* hsl shorter hue — takes the shortest arc around the hue wheel */
background: linear-gradient(in hsl shorter hue, to right, hsl(0, 80%, 50%), hsl(240, 80%, 50%));

/* hsl longer hue — wraps the long way for rainbow effects */
background: linear-gradient(in oklch longer hue, 90deg, oklch(65% 0.25 0), oklch(65% 0.25 360));

The same syntax applies to radial-gradient() and conic-gradient().

20 Copy-Paste Gradient Examples

Each line is valid CSS for the background property.

linear-gradient

/* 1. Vivid sunset — oklch reds through orange */
background: linear-gradient(in oklch, 135deg, oklch(55% 0.25 29), oklch(78% 0.22 75));

/* 2. Ocean — hsl short-hue arc, blue to teal */
background: linear-gradient(in hsl shorter hue, to bottom, hsl(210, 80%, 50%), hsl(165, 70%, 40%));

/* 3. Warm ivory to near-black — lab preserves perceived lightness steps */
background: linear-gradient(in lab, 160deg, lab(95% -2 8), lab(10% 5 -15));

/* 4. Neon sign — oklch vivid pink to cyan */
background: linear-gradient(in oklch, 90deg, oklch(65% 0.30 340), oklch(80% 0.20 190));

/* 5. Monochrome depth — oklch gray ramp */
background: linear-gradient(in oklch, 180deg, oklch(98% 0 0), oklch(15% 0 0));

/* 6. Forest green — perceptually even ramp */
background: linear-gradient(in oklch, to bottom, oklch(90% 0.12 140), oklch(30% 0.18 145));

/* 7. Cyberpunk — yellow-green to electric blue */
background: linear-gradient(in oklch, 120deg, oklch(85% 0.28 130), oklch(55% 0.28 265));

/* 8. Warm sand */
background: linear-gradient(in lab, 170deg, lab(90% 5 20), lab(55% 12 35));

radial-gradient

/* 9. Glowing amber spot */
background: radial-gradient(in oklch, circle at center, oklch(90% 0.22 85), oklch(45% 0.25 60) 70%, transparent);

/* 10. Portal vortex */
background: radial-gradient(in oklch, ellipse at 30% 40%, oklch(75% 0.28 295), oklch(30% 0.20 265) 60%, oklch(10% 0 0));

/* 11. Northern lights */
background: radial-gradient(in oklch, ellipse at top, oklch(80% 0.25 180), oklch(45% 0.30 290) 50%, oklch(8% 0 0));

/* 12. Frosted glass highlight */
background: radial-gradient(in oklch, circle at 25% 25%, oklch(99% 0.02 100 / 0.6), oklch(75% 0.04 220 / 0));

conic-gradient

/* 13. Full hue wheel — all colors stay saturated */
background: conic-gradient(in oklch longer hue, oklch(65% 0.25 0), oklch(65% 0.25 360));

/* 14. Pie chart slice */
background: conic-gradient(in oklch, oklch(65% 0.25 145) 0% 68%, oklch(80% 0.15 55) 68%);

/* 15. Progress ring at 75% */
background: conic-gradient(in oklch, oklch(70% 0.28 264) 0% 75%, oklch(85% 0.05 240) 75%);

/* 16. Starburst — repeating sector */
background: conic-gradient(in oklch, oklch(80% 0.22 60) 0deg, oklch(55% 0.30 25) 30deg, oklch(80% 0.22 60) 60deg);

Layered and specialty

/* 17. Glassmorphism overlay */
background:
  linear-gradient(in oklch, 135deg, oklch(85% 0.10 270 / 0.35), oklch(70% 0.15 220 / 0.15)),
  linear-gradient(in oklch, 220deg, oklch(92% 0.08 60 / 0.2), transparent);

/* 18. Holographic foil — long hue arc creates rainbow shift */
background: linear-gradient(in oklch longer hue, 130deg, oklch(80% 0.30 0), oklch(80% 0.30 360));

/* 19. Text gradient (pair with background-clip: text + color: transparent) */
background: linear-gradient(in oklch, 90deg, oklch(65% 0.30 29), oklch(75% 0.28 300));
-webkit-background-clip: text;
color: transparent;

/* 20. High-contrast dark-to-light — white text on the dark end reads ≥ 12:1 */
background: linear-gradient(in oklch, to right, oklch(20% 0.08 265), oklch(92% 0.04 100));

For text gradient examples like #19, the CSS Text Gradient Generator adds the background-clip: text prefix and copies browser-compatible output in one click.

oklch Coordinate Cheat Sheet

oklch values follow oklch(L% C H):

L (lightness): 0% = black, 100% = white
C (chroma): 0 = gray, 0.4 = maximum saturation for most hues
H (hue angle): same 0–360° wheel as hsl — 0/360 = red, 120 = green, 240 = blue

When I refactored a data-visualization component's progress rings from conic-gradient(hsl(120, 80%, 45%), hsl(240, 80%, 45%)) to conic-gradient(in oklch, oklch(62% 0.26 142), oklch(58% 0.28 264)), the ring stayed fully chromatic through all intermediate angles instead of going gray at 180°. The oklch chroma values at each angle stayed above 0.25, while the hsl version dipped to approximately 0.08 effective chroma at the midpoint.

The key practical advantage: nudging L by 10 points always looks like the same perceptual step, regardless of hue. HSL does not do this — a hue-90 (yellow) at L 50% looks much brighter than hue-270 (blue) at L 50%. That asymmetry makes monochrome oklch gradients (examples 5 and 6 above) look smooth and deliberate without adding intermediate stops.

Browser Support and Fallbacks

All modern evergreen browsers support in oklch interpolation: Chrome 111+ (March 2023), Safari 16.4+ (March 2023), Firefox 113+ (May 2023). For older targets, write a sRGB fallback first:

/* Fallback — works everywhere */
.hero {
  background: linear-gradient(135deg, #e91e63, #3f51b5);
}

/* Progressive enhancement */
@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(in oklch, 135deg, oklch(65% 0.28 350), oklch(55% 0.25 270));
  }
}

After you pick colors, verify that your text remains readable over the gradient's full range — oklch shifts chroma in ways sRGB does not, which can affect midpoint contrast in unexpected directions. The Color Contrast Checker accepts oklch values directly and reports WCAG AA and AAA ratios against white or black text. For building and previewing any gradient interactively, the CSS Gradient Generator lets you drag stops, change angles, and export the final background: line.

Made by Toolora · Updated 2026-06-26