Gradients in 2026: oklch interpolation

The "muddy middle" problem (and its fix)

.old { background: linear-gradient(to right, blue, yellow); }

In sRGB, blue→yellow goes through MUDDY GRAY in the middle. Because the math averages RGB channels and "blue + yellow = somewhere brown."

.modern { background: linear-gradient(in oklch to right, blue, yellow); }

in oklch tells the browser to interpolate in OKLCH space. The middle stays vibrant. Looks like a smooth rainbow instead of muddy mush.

Other color spaces

linear-gradient(in srgb,           ...);
linear-gradient(in hsl shorter hue, ...);  /* hue takes the shorter angular path */
linear-gradient(in hsl longer hue,  ...);  /* takes the long way around */
linear-gradient(in oklch,           ...);
linear-gradient(in lab,             ...);

For most "color A to color B" gradients, in oklch is the safe modern default.

Conic gradients

background: conic-gradient(in oklch from 90deg, red, yellow, green, cyan, blue, magenta, red);

Same color-space rules apply to radial-gradient and conic-gradient.

Hard stops

background: linear-gradient(to right, blue 0% 50%, yellow 50% 100%);

color 0% 50% means "this color from 0% to 50% with no transition" — creates a sharp boundary. Useful for stripe patterns or two-tone backgrounds.