CSS Gradients: Why Your Color Transitions Look Muddy (and How to Fix Them)

You define a gradient from a nice blue to a nice yellow, expecting a clean, vibrant transition. Instead, the middle of the gradient is a muddy gray-brown. You've seen this. Every developer who works with CSS gradients has seen this. And the reason it happens is a fundamental issue with how browsers interpolate color. /* This produces a muddy middle */ background : linear-gradient ( to right , #3498 db , #f1c40f ); The default interpolation happens in sRGB color space, which means the browser takes the red, green, and blue channels of each endpoint and linearly transitions between them. When you go from blue (low red, moderate green, high blue) to yellow (high red, high green, low blue), the midpoint has moderate values across all three channels. That's gray. More precisely, it's a desaturated brownish gray that doesn't belong in any design system. The color space fix CSS now lets you specify which color space to use for interpolation: /* sRGB - the default, often muddy */ background :