Gradient Design Trends: From Mesh Backgrounds to Grainy Glow

Flat design killed the gradient in 2013; the gradient forgave nothing and came back to run the place. Today's gradients are atmospheric rather than glossy — here are the styles that dominate current sites and how to make each one.

Aurora / mesh backgrounds

Multiple soft radial gradients layered on one element, like stage lights through fog. The hero-section default of the last few years. Stack three or four radial-gradients with transparent falloff at different positions, each a different hue of similar lightness.

Grainy gradients

The analogue answer to too-smooth screens: a gradient with visible noise, like risograph print. Overlay an SVG turbulence filter or a tiny noise PNG at low opacity. The grain also hides banding — two problems, one fix.

Holographic conic

Conic gradients cycling through iridescent hues make the 'foil card' effect — crypto cards, badges, premium tiers. Animate the rotation angle slowly and it shimmers. Keep it on small elements; a full-page hologram is a migraine.

Text gradients

One display headline with background-clip: text, everything else solid. The restraint is the trend: gradient type works because it's the only loud thing on the page. Verify the lightest stop still passes contrast for the headline's size.

Subtle surface tints

The quietest trend: cards and sections with a barely-there two-tone wash (2–4% lightness difference) instead of flat gray. It adds depth no one consciously notices. If users can point at your gradient, it's too strong for this job.

All five styles start from ordinary CSS gradients — build the stops in the gradient generator, then layer and garnish.

Sources and further reading

• <gradient> CSS data type · MDN Web Docs