Why Your Gradient Goes Grey in the Middle
Build a gradient from a strong blue to a strong yellow and something disappointing happens halfway across: a band of dull grey-brown that neither end colour predicted. The gradient is not broken and neither is your screen. It is a direct consequence of how the browser interpolates between two colors.
Straight-line interpolation through the wrong space
By default, a CSS gradient interpolates each of the red, green and blue channels independently and linearly. Picture the sRGB color space as a cube with black at one corner and white at the opposite one; a two-stop gradient draws a straight line between two points inside it. The problem is that saturated colors live near the surface of that cube, and a straight line between two points on a surface passes through the interior — where colors are less saturated. The midpoint of blue-to-yellow is, geometrically, close to the middle of the cube. The middle of the cube is grey.
The effect is worst for pairs that sit far apart on the hue wheel, which is exactly the pairing people reach for when they want a gradient to feel vivid.
Fix 1: add a middle stop
The simplest and most portable fix. Rather than letting the browser choose the midpoint, choose it yourself: pick a saturated color that sits between the two hues and drop it in at 50%. Blue to yellow becomes blue → teal → yellow, and the mud is gone. Two extra stops on a long gradient is not excessive; complex gradients in production often use four or five.
Fix 2: interpolate in a different color space
Modern CSS lets you say which space to travel through: linear-gradient(in oklch, #2f6ee6, #ffd12f). OKLCH is perceptually uniform and cylindrical, so interpolation rotates the hue around the cylinder instead of cutting through the desaturated middle. Add longer hue or shorter hue to control which way round it goes. Support is now good in evergreen browsers, but check your targets and keep an sRGB declaration above it as a fallback.
Fix 3: keep the hues closer together
Gradients between neighbouring hues — an analogous pair — barely suffer from this at all, because the straight line between them stays near the surface of the cube. If a gradient looks muddy and you cannot add stops, moving the two endpoints closer on the hue wheel almost always helps more than adjusting their brightness.
Fix 4: watch the lightness, not just the hue
A related and easily missed problem: if both stops have similar lightness, the gradient reads as flat even when the hues are far apart. If one stop is much lighter, the perceived midpoint shifts toward the darker end, because perceived lightness is not linear in the channel values. When a gradient looks lopsided rather than muddy, lightness — not hue — is usually the culprit.
Try it
The gradient generator lets you add as many stops as you like, drag each one's position, and copy the resulting CSS — or copy a link to the exact gradient, which is a much better way to hand a gradient to a teammate than pasting a screenshot and a hex code.
