Fixing the Grey Middle in CSS Gradients

A gradient from blue to yellow in plain CSS often passes through a muddy grey in the middle. That's because the browser blends the colours in sRGB, where the straight line between them dips in saturation.

/* Muddy middle */
background: linear-gradient(90deg, #2563eb, #facc15);

/* Smoother: interpolate in OKLCH (modern browsers) */
background: linear-gradient(in oklch 90deg, #2563eb, #facc15);

/* Works everywhere: add a mid stop by hand */
background: linear-gradient(90deg, #2563eb, #22c55e 50%, #facc15);

• Colour pairs on opposite sides of the colour wheel (blue–orange, red–green) are the worst for grey middles.
• in oklch keeps lightness even; in oklch longer hue goes the other way round the wheel.
• Check text on gradients at their lightest point for contrast.