Design linear and radial CSS gradients visually for backgrounds.
When you ask the browser to transition from Red (#FF0000) to Green (#00FF00), it doesn't just guess. It mathematically calculates the exact color steps between those two points using an algorithm called Interpolation.
Historically, browsers interpolated colors directly in the RGB color space. This causes a major visual problem known as the "Muddy Middle".
If you transition from Blue to Yellow in RGB math, the halfway point is roughly #808080 (Gray). This creates a very ugly, desaturated dead zone right in the middle of your beautiful gradient, ruining the aesthetic.
Modern CSS allows you to explicitly declare the color space used for interpolation (e.g., in oklch or in hsl).
If you interpolate in the oklch (Perceptually Uniform) color space, the browser transitions across the color wheel rather than cutting straight through the gray center of the RGB cube. This maintains maximum saturation throughout the transition, resulting in incredibly vibrant, professional-looking gradients.
Why do standard RGB gradients sometimes look 'muddy' or grayish in the middle?
