Why Your CSS Gradients Look Muddy — and How to Fix Banding
A gradient that looks great in your head can render gray-and-muddy or stripey in the browser. Two separate effects cause it — and both are fixable once you know what you're looking at.
The gray dead zone
Blend blue to yellow in plain sRGB and the midpoint is literally #808080 gray. The interpolation runs in a straight line across the RGB cube, and the line between two opposite hues passes through the desaturated center — so chroma collapses to nearly zero halfway through.
Interpolate the same two colors in OKLCH or OKLAB and the path routes around that center: the midpoint stays colorful, because a perceptual space keeps lightness and chroma sensible the whole way.
Banding is a different problem
Banding — visible stripes in what should be a smooth ramp — comes from 8-bit quantization. Screens store 256 levels per channel; where a gradient changes slowly, many pixels round to the same 8-bit color, then jump to the next, and you see a hard edge.
Crucially, an even perceptual gradient does not guarantee no banding. What matters is how many distinct 8-bit colors the ramp actually produces across its width: few distinct colors with long flat runs means visible bands.
How to fix both
For the dead zone, interpolate in OKLCH or OKLAB instead of sRGB. For banding, give the ramp more room to change — add intermediate stops, or apply a faint noise/dither overlay so the steps break up instead of lining up.
Diagnose before you ship: plotting lightness, chroma, hue, and per-step perceptual distance across a gradient shows exactly where it dips into gray or stalls into bands.