If you've ever written linear-gradient(blue, yellow) and got a dull grey-ish band in the middle, the colours aren't wrong; the interpolation is. By default browsers blend gradient stops in sRGB, which isn't perceptually even. Halfway between a saturated blue and a saturated yellow in sRGB is a desaturated grey.

The fix: interpolate in OKLab or OKLCH

Modern CSS lets you choose the colour space the gradient is blended in:

/* default: blended in sRGB, muddy middle */ background: linear-gradient(90deg, #1e40ff, #ffd400); /* blended in OKLab: perceptually even, no grey band */ background: linear-gradient(in oklab 90deg, #1e40ff, #ffd400); /* blended in OKLCH: goes "around" the hue wheel, very vivid */ background: linear-gradient(in oklch 90deg, #1e40ff, #ffd400);
  • OKLab keeps lightness changing smoothly, so it's the safe choice for most UI gradients.
  • OKLCH interpolates hue as an angle, so blue→yellow passes through greens or pinks (you can add shorter hue / longer hue to pick the direction). Great for vivid hero backgrounds, sometimes too much for buttons.

Older browsers

The in <colorspace> syntax is supported in current Chrome, Edge, Safari and Firefox, but an old browser will drop the whole declaration. Put a plain sRGB line first so there's always a fallback:

background: linear-gradient(90deg, #1e40ff, #ffd400); background: linear-gradient(in oklab 90deg, #1e40ff, #ffd400);

Other small things that help

  • If you can't use OKLab, adding a hand-picked middle stop (e.g. a green between blue and yellow) avoids the grey band too.
  • conic-gradient() is perfect for pie-chart style rings and colour wheels; repeating-linear-gradient() gives you stripes without images.
  • Transparent stops: transparent is "transparent black" in sRGB blends, which can darken edges; using the same colour at 0 alpha (e.g. rgb(30 64 255 / 0)) fades cleanly.

Disclosure: I run GoToolsOnline. I recently rebuilt its free CSS gradient generator to do linear, radial and conic (plus repeating) gradients with up to 50 draggable stops, OKLab/OKLCH blending, and it writes the sRGB fallback line for you: https://gotoolsonline.com/tools/css-gradient