CSS Gradients: Why Developers Get Them Wrong (And Designers Get Them Right)

⏱ 5 min read · Design & Color

A designer hands you a gradient: var(--accent-primary) to orange. You write linear-gradient(to right, #0066FF, #FF6600). It looks muddy in the middle. The designer says it's wrong. You check the hex codes — they're correct. So what's the problem?

The problem is how CSS interpolates colors. And it's not your fault — it's how gradients work by default.

The RGB Interpolation Problem

By default, CSS gradients interpolate in RGB color space. This means the browser calculates intermediate colors by blending the red, green, and blue channels separately.

Blue (#0066FF) is RGB(0, 102, 255). Orange (#FF6600) is RGB(255, 102, 0). The midpoint is RGB(127, 102, 127) — a muddy purple-gray. This is mathematically correct but visually wrong.

Designers create gradients in tools like Figma or Photoshop, which use perceptual color spaces (LAB or LCH) that interpolate through hue rather than RGB channels. The result is a smooth transition through yellow and green, not muddy purple.

CSS does math. Design tools do perception. The results don't match.

The Solution: Add Midpoint Colors

Instead of letting CSS interpolate directly from blue to orange, add intermediate colors that guide the gradient through the hues you want:

linear-gradient(to right, #0066FF, #00CCCC 25%, #66FF66 50%, #FFCC00 75%, #FF6600)

This forces the gradient through cyan, green, and yellow, creating a smooth perceptual transition. It's more code, but it matches what designers expect.

The Easing Problem

CSS gradients use linear interpolation — the color changes at a constant rate from start to finish. This creates gradients that feel mechanical and abrupt.

Designers use easing — the color changes slowly at the start and end, and quickly in the middle. This creates gradients that feel smooth and natural.

CSS doesn't have built-in easing for gradients, but you can fake it by adding more color stops with non-linear spacing:

linear-gradient(to right, #0066FF 0%, #0066FF 10%, #FF6600 90%, #FF6600 100%)

This creates a slow start and slow end, with a quick transition in the middle.

Radial Gradients Are Worse

Radial gradients have all the same interpolation problems as linear gradients, plus an additional issue: the default shape is an ellipse that matches the element's aspect ratio, not a perfect circle.

If your element is 200px wide and 100px tall, radial-gradient(circle, blue, orange) creates an ellipse, not a circle. You need radial-gradient(circle at center, blue, orange) to force a circular gradient.

And even then, the color interpolation is still in RGB, creating the same muddy midpoints.

Conic Gradients and Hue Interpolation

Conic gradients (circular gradients that rotate around a center point) have a unique problem: they interpolate hue by taking the shortest path around the color wheel.

A conic gradient from red (0°) to blue (240°) goes through orange, yellow, and green. But a conic gradient from red (0°) to red (360°) goes through all hues — it's a full rainbow.

If you want a specific hue path, you need to add intermediate color stops to force the gradient through the hues you want.

The Banding Problem

Gradients with large color ranges can show visible banding — discrete color steps instead of smooth transitions. This happens because monitors can only display a limited number of colors (typically 16.7 million in 24-bit color).

The solution: add noise or dithering. A subtle texture overlay (1-2% opacity) breaks up the banding and makes the gradient appear smooth. This is a design trick, not a CSS feature.

What Designers Do Differently

When designers create gradients in Figma, Sketch, or Photoshop, they:

1. Use LAB or LCH color space for perceptual interpolation
2. Add easing curves to control the transition speed
3. Manually adjust midpoint colors to avoid muddy transitions
4. Add subtle noise to prevent banding

CSS can't do most of this automatically. You have to manually replicate these techniques using color stops and overlays.

The Future: CSS Color Level 4

CSS Color Level 4 introduces new color spaces and interpolation methods. You'll be able to specify linear-gradient(in lch, blue, orange) to interpolate in perceptual color space.

Browser support is limited as of now, but it's coming. When it arrives, gradients will finally match what designers create in design tools.

Practical Advice

Until CSS Color Level 4 is widely supported:

1. Add intermediate color stops to guide the gradient through the hues you want
2. Use non-linear color stop positions to fake easing
3. Test your gradients on multiple screens — banding is more visible on some displays
4. When in doubt, export the gradient from your design tool and extract the color stops

Gradients are harder than they look. But once you understand how interpolation works, you can create gradients that match design intent.