The same feature makes a landing page look expensive or amateur. The difference isn't the colours you pick — it's the muddy grey zone that appears in the middle when you're not looking.
Gradients are back, and they're everywhere expensive-looking software lives — hero sections, buttons, cards, backgrounds. They're also the fastest way to make a site look cheap, and the frustrating part is that the cheap version and the premium version often use the same two colours. The difference is in what happens between those colours, in a place most people never think to look: the middle.
What a gradient is doing
CSS is the styling layer of the web, and gradients are one of its most abused features:
"Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language, such as HTML or XML."
— Wikipedia, "Cascading Style Sheets" (CC BY-SA 4.0)
A linear gradient interpolates between colours across a direction. Simple in concept — and the naive result is where the trouble starts.
The grey dead zone
Here's the core problem. When you blend two saturated colours that sit far apart on the colour wheel — say a blue and an orange — the straight-line path between them in the default colour space passes through a desaturated, muddy grey-brown in the middle. Your two endpoints look great; the centre looks like dishwater. That muddy midpoint is the single biggest reason a gradient reads as "cheap." The eye registers the dead zone even if it can't name it. Premium gradients are the ones engineered to never pass through mud.
Two fixes: closer hues, or a bridge colour
There are two reliable ways out. The first is to keep your two colours close on the colour wheel — blue to purple, orange to pink, teal to green. Adjacent hues blend without a grey crossing, which is why so many polished gradients are subtle, analogous pairs rather than dramatic opposites. The second, when you do want distant colours, is to add a middle stop: a third colour placed partway through that keeps the blend saturated as it travels. A blue-to-orange gradient that routes through a vivid magenta or a bright teal midpoint stays alive the whole way. Multi-stop gradients aren't more complex for the sake of it — they're how you cross the wheel without falling into the mud.
Direction and easing
Two smaller touches separate careful gradients from lazy ones. Angle matters: a slight diagonal (say 135 degrees) almost always looks more considered than a flat top-to-bottom fade. And real gradients in nature don't transition linearly — a subtle easing, where the colour lingers near the endpoints and moves faster through the middle, reads as softer and more organic than a mechanical even blend. You don't need to overthink these, but a default straight-down, perfectly-linear gradient is the visual equivalent of a stock photo.
Pair it with the right shadow
The last trick that makes gradients look intentional: match the surrounding shadows to the gradient's colour, not to black. A coloured element casting a plain grey-black shadow looks pasted on; the same element casting a soft shadow tinted toward its own hue looks like it belongs to a designed system. This "coloured shadow" move is a hallmark of premium UI — the light feels coherent because the shadow shares the palette. A gradient button with a matching-hue shadow reads as crafted; the same button with a default shadow reads as a template.
The colour space matters more than you think
CSS now supports interpolation in different colour spaces via the in keyword — linear-gradient(in oklch, ...) — and this is the single biggest quality lever most designers haven't touched. The default colour space (sRGB) is where the grey dead zone lives, because sRGB doesn't map evenly to how humans perceive colour. Interpolating in OKLCH or LCH routes the gradient through perceptually uniform space, which means the blend stays vivid and the mid-tone mud largely vanishes without a bridge colour. Two distant hues that produce a grey midpoint in sRGB can produce a clean, saturated transition in OKLCH. Browser support is solid in modern engines. If you're still fighting muddy midpoints with extra stops, try changing the colour space first — it's often the simpler fix.
Radial and conic gradients
Linear gradients get all the attention, but radial-gradient and conic-gradient solve specific design problems better. A subtle radial gradient centred on a card creates a soft spotlight effect that adds depth without a visible colour band. A conic gradient rotating around a centre point is how you build colour wheels, progress rings, and those trendy holographic-foil backgrounds. The same muddy-midpoint rules apply: keep hues close or add stops, and watch the colour space. The difference is that radial and conic gradients draw attention to a focal point, while linear gradients draw the eye along a direction. Choose the shape by what you want the viewer to notice.
Gradient on text
The trend of applying a gradient fill to text instead of a solid colour works via background-clip: text combined with a transparent text colour. It looks striking on headlines and completely unreadable on body copy — a distinction worth respecting. The technique clips a background gradient to the text shape, so the text itself becomes the gradient. Use it for display type at large sizes, never for running paragraphs, and always check that the lightest point in the gradient still meets WCAG contrast requirements against its background. A gradient heading that's illegible in half its sweep is worse than a solid-colour heading, no matter how premium the gradient looks in isolation.
Build it deliberately
Design the gradient instead of accepting the default. A CSS gradient generator lets you add middle stops and adjust the angle so you can watch the muddy midpoint disappear the moment you route through a saturated bridge colour. A color converter helps you find hues that sit near each other on the wheel (converting to HSL makes "adjacent hue" concrete — just nudge the H value) so your endpoints blend clean. And a CSS box-shadow generator lets you tint the shadow toward the gradient's colour for that coherent, designed feel. Same two colours, completely different result — the premium version is just the one that minded the middle.
← All articles