Depth & atmosphere

Mesh & Aurora CSS Gradient Backgrounds

A mesh gradient is nothing more than several radial gradients sharing one surface: each layer contributes a pool of light, and where the pools overlap the color deepens. Stacked from theme tokens they make the loudest legitimate backdrop in a design system — decoration for surfaces that carry a headline, not a paragraph.

Stay in one hue family: Pools of the same hue at different strengths read as depth; opposing hues read as a screensaver.
Anchor the corners: Place pools at edges and corners so the center stays calm enough to hold content.
Add grain to hide banding: Wide soft ramps band on cheap panels — a 5–8% noise layer disguises the steps.

Gradient examples

4 effects built from CSS alone

Every swatch below is painted by the declaration beside it — no image files. The stops come from color-mix over your theme tokens, so switch modes and watch each sample follow.

Mesh gradient

Overlap three or four pools of the brand color at different corners and strengths — the signature backdrop of modern product marketing.

Vary the strengths, not the hues: 16 / 12 / 8 percent of one color layers into depth without turning psychedelic.

.mesh {
  background-image:
    radial-gradient(circle at 20% 10%,
      color-mix(in oklab, var(--primary) 16%, transparent), transparent 45%),
    radial-gradient(circle at 85% 30%,
      color-mix(in oklab, var(--primary) 12%, transparent), transparent 45%),
    radial-gradient(circle at 60% 95%,
      color-mix(in oklab, var(--primary) 8%, transparent), transparent 50%);
}

Aurora veil

Stretch the pools into wide, low ellipses drifting near the top edge — sheets of light instead of points, like a sky behind the headline.

Ellipses wider than 50% of the surface are what separates aurora from mesh; round pools snap it back to spotlights.

.aurora {
  background-image:
    radial-gradient(60% 35% at 20% 10%,
      color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%),
    radial-gradient(55% 30% at 80% 25%,
      color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%);
}

Vignette

Darken the edges instead of lighting the center — the photographic move that pulls the eye inward on covers, cards, and screenshots.

Start the darkening past 60% of the radius; a vignette that reaches the middle just makes the whole surface dingy.

.vignette {
  background-image: radial-gradient(circle,
    transparent 60%,
    color-mix(in oklab, var(--foreground) 7%, transparent) 100%);
}

Conic glow

Sweep brand light around a point just below the surface — a sunrise over the bottom edge for footers and closing CTA bands.

Keep the sweep soft and partial; a full-turn conic at visible strength is a color wheel, and color wheels sell nothing.

.conic-glow {
  background-image: conic-gradient(
    from 250deg at 50% 120%,
    transparent 20%,
    color-mix(in oklab, var(--primary) 14%, transparent) 45%,
    color-mix(in oklab, var(--primary) 8%, transparent) 55%,
    transparent 80%);
}

Implementation check

Ship the still, solid version everywhere else.

Judge the gradient with real content on top, in both modes, and measure text contrast against the strongest stop it sits on — not the base surface alone. Then park animated surfaces on a still frame for reduced motion, and give clipped text a solid color for forced-color modes.

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

@media (forced-colors: active) {
  .gradient-headline {
    background-image: none;
    color: CanvasText;
  }
}

Continue the reference

Related gradient guides

Compare the neighboring effects before committing a surface.

View all gradients

Washes & glowsAdd quiet brand washes, hero glows, and corner light to app surfaces with soft CSS gradients mixed from your theme tokens in oklab.Read guide Text & bordersClip gradients into headlines, draw gradient borders and underlines, and fade divider rules with pure CSS — full-strength color on small areas.Read guide Animated gradientsAnimate gradient backgrounds with background-position pans, shimmer sweeps, and hue drift — ambient CSS motion with a reduced-motion fallback.Read guide

Carry the light into a complete theme.

Nodlume's theme defines the palette, fonts, shadows, and textures these gradients are mixed from, and generates them into the React project with everything else.

Start planning free