Blog · Trends

Gradients grew up: how to use them without looking like 2010

The gradient came back, but it came back different. What changed, why it works now, and the four mistakes that still date a design instantly.

For most of the 2010s, gradients were a punchline. They meant glossy buttons with a shine across the top, drop shadows on everything, and a web that looked like a stack of plastic bevels. Flat design swept it all away, and for years the only acceptable background was a solid colour.

They are everywhere again — but almost nothing about how they are used has survived from the first era.

What changed

They became structural, not decorative. The old gradient sat on a 40px button to fake a light source. The modern one covers a whole hero section, an entire card, or the background of a page. It is not pretending to be three-dimensional; it is providing depth and movement to a flat surface.

They became subtle, or enormous. There is no middle ground any more. Either the gradient is so gentle you barely register it — two neighbouring tones of the same hue, adding a sense of light falling across a section — or it is a full-bleed, multi-stop wash of clearly different colours. The mid-strength gradient that was standard in 2010 is the one that still reads as dated.

They became free. A CSS gradient costs no HTTP request, no image weight, scales to any screen density and can be animated. Compared with shipping a background image, it is close to free, which is why designers reach for it so readily now.

Conic gradients arrived. conic-gradient() sweeps colour around a centre point rather than along a line, and it is responsible for most of the iridescent, holographic look of the last few years — as well as for pie charts drawn in pure CSS.

The four patterns worth stealing

The atmospheric hero. A large radial gradient, off-centre, in two tones of the brand colour, sitting behind the headline. Reads as light rather than as a gradient.
The mesh wash. Several soft radial gradients at different positions, layered with commas in one background-image. Produces the blurred, multi-colour look without any image asset.
The section transition. A gentle linear gradient from the page background to a slightly darker tone, used to separate sections without a hard border.
The accent edge. A vivid gradient confined to a thin element — a 4px top border, an underline, the fill of an icon. High impact, low risk.

The four mistakes that still date a design

Too many colours. Two stops is usually enough; three is the practical ceiling. A five-colour gradient is a rainbow, and rainbows are decorations, not backgrounds. Pull your stops from one harmonised palette — the Use for gradient button in the generator carries a palette straight into the stops list for exactly this reason.

Visible banding. Wide, gentle gradients show stepped bands on large displays because 8-bit colour cannot supply enough intermediate values. Fixes: move the stops closer together, add an intermediate stop, or overlay a very subtle noise texture — the generator's noise option exists for this, and it adds a pleasant printed quality at the same time.

Text on the wrong end. Designers check the headline against the gradient's average colour and ship it. Check it against the lightest and darkest points instead. If it fails at either, put a translucent scrim behind the text rather than compromising the gradient.

Restless animation. An animated gradient can make a hero feel alive; it can also make a page impossible to read. Keep the cycle slow — nine seconds or more — keep the colour distance small, and always respect prefers-reduced-motion. Continuous background movement is a real accessibility problem, not a stylistic preference.

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

Where they are heading

The interesting development is not visual but technical: CSS is gaining the ability to interpolate gradients in perceptually uniform colour spaces such as OKLCH. Interpolating in sRGB is why some two-colour gradients pass through a muddy grey in the middle — blue to yellow being the classic offender. Interpolating in a perceptual space keeps the midpoint vivid. Support is arriving across current browsers, and it is worth knowing about because it fixes the single most common complaint about gradients between distant hues. There is more on colour spaces in our guide to HEX, RGB, HSL and OKLCH.

Build a gradient →