How to Make a CSS Gradient That Doesn't Look Cheap

You've seen the gradient. Purple bleeding into orange across a hero section, and somewhere in the middle it turns to mud. A grey-brown smear that nobody chose. The two end colours are lovely on their own. The road between them is where it all goes wrong.

That muddy middle is the single biggest reason a gradient reads as cheap. It's not your taste. It's math — the kind that happens automatically the moment you pick two colours sitting far apart on the wheel. Once you see why the dead-zone forms, you can route around it every time.

Why the middle turns to mud

Take two colours on opposite sides of the hue wheel. A hot blue and a warm orange, say. To get from one to the other, the gradient has to pass through everything between them — and the shortest path runs straight through grey.

Here's the mechanism. As one colour fades out and the other fades in, the middle is a near-even mix of both. Mix opposites and they cancel. Saturation collapses. What was a vivid blue and a vivid orange becomes, at the 50% mark, a limp desaturated sludge. The eye reads that instantly and files the whole thing under amateur.

The wider the hue gap, the worse the sag. Blue to orange is brutal. Blue to teal barely notices.

Keep the two colours close

The easiest fix costs you nothing. Pick two colours that are already near each other in hue, and there's no grey to pass through — the whole ramp stays saturated.

Think blue to indigo. Or coral to hot pink. Amber sliding into red. These are analogous pairs, neighbours on the wheel, and they blend without a dead-zone because there's barely any hue distance to cross. If you want a starting pair that already agrees with itself, spin a set in Harmonies and grab two analogous swatches; they're built to sit close.

This is why so many tasteful gradients look like they're the same colour, only lighter and darker. Because they nearly are. A single hue, two lightness steps — #4dabf7 down to #1971c2 — reads as confident and calm. Boring? Maybe. Never cheap.

Or route through a good midpoint

Sometimes you genuinely want two far-apart colours. Blue and orange, because the brief says so. Fine. Then don't let the gradient find its own path — give it a waypoint.

Drop a third colour in the middle that keeps the saturation up. A punchy magenta or a warm pink between your blue and orange holds the energy instead of letting it drain to grey. CSS lets you add as many stops as you like:

linear-gradient(90deg, #4263eb, #e64980, #f76707)

That middle stop is doing the real work. Pick it by eye in the Mixer — blend your two ends and watch where the muddy step lands, then nudge the midpoint toward something with life in it. You're not mixing two colours anymore. You're drawing a route.

Interpolate in a better colour space

Even a two-stop gradient can dodge some of the mud, for free, by changing how the browser walks between the stops. The default is sRGB, which is exactly the space where opposite colours cancel. You can ask for something smarter.

Modern CSS lets you set the interpolation space right in the function:

linear-gradient(in oklch, #4263eb, #f76707)

Interpolate in oklch or in hsl and the browser travels a curved path that keeps chroma up through the middle, instead of the straight line through grey that sRGB takes. Same two colours. Livelier middle. It ships in every current browser, with the plain version as a natural fallback for old ones. If you want to see what those OKLCH values even are, run your hexes through the Converter first.

Linear, radial, and knowing when to stop

Linear gradients travel in a straight line and suit backgrounds, hero panels, long buttons. Radial gradients bloom out from a point, which makes them right for a glow behind a logo or a soft spotlight on a card. Don't reach for radial just to look busy. It draws the eye to its centre, so put the centre where you actually want attention.

The bigger discipline is restraint. A gradient that shouts is a gradient you'll hate in a month. Keep the contrast between your two ends gentle and the effect reads as expensive:

• Backgrounds: a whisper of shift, maybe 10% lightness end to end. You should almost not notice it.
• Buttons: a subtle top-to-bottom ramp gives depth without turning the button into a rainbow.
• Overlays: a fade to rgba(0,0,0,.5) over an image keeps white text readable. Useful, invisible, doing its job.

When every section has its own screaming gradient, none of them mean anything. Use one. Make it quiet.

Common questions

Why does my gradient look grey in the middle?

Your two colours sit too far apart in hue, and the midpoint is where they cancel to desaturated grey. Either bring the colours closer together, add a saturated stop in the middle, or set the gradient to interpolate in oklch so the browser routes around the dead-zone.

How many colour stops should I use?

Two is plenty for most work. Add a third only when your ends are far apart and you need to steer the middle away from mud. Past three or four stops you're usually making noise, not a gradient.

Is OKLCH interpolation safe to use in production?

Yes. The in oklch syntax works in every current browser, and older ones simply ignore the hint and fall back to a normal gradient — no broken layout, just a slightly muddier middle for a shrinking few.

A good gradient hides its own effort. Two colours that get along, a smart path between them, and the restraint to keep it quiet. Build one and copy the CSS straight out of the Gradients tool — then set it as a background and see if you can barely tell it's there. That's the win.