Gradients

Designing gradients that look good: interpolation, stops, and perceptual smoothness

A gradient between two colors should look smooth, but CSS linear-gradient often produces a muddy, desaturated band through the middle of the transition. The problem is that CSS gradients interpolate in sRGB space, which is not perceptually uniform — the midpoint of a red-to-blue gradient passes through a desaturated purple-gray, not a vibrant purple. Modern CSS now offers interpolation in perceptually uniform spaces like OKLCH and OKLab, which produce gradients that stay saturated and visually smooth across the entire range. Understanding this system changes how you design gradients.