Tint & light

Subtle CSS Gradient Washes & Glows

The quietest gradient is not a color transition at all — it is light. A wash or a glow tints one region of the canvas toward the brand and lets it fall away to nothing, so the surface reads as lit rather than painted. Mixed from theme tokens, the same declaration follows a rebrand and both color modes.

Fade to transparent: End on transparency, not a second color — a wash is the surface plus light.
One light source: Place the glow where a lamp could plausibly sit; two glows need a reason.
Mix in oklab: Interpolating in oklab keeps the falloff smooth instead of graying out mid-ramp.

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.

Brand wash

Tint the top of the page toward the primary color and let it dissolve before the content begins — the softest way to claim a surface for the brand.

Keep the fade complete before the first paragraph of body text; a wash that reaches reading content is a contrast bug, not a mood.

.wash {
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--primary) 10%, transparent),
    transparent 60%);
}

Hero glow

Pool a soft ellipse of brand light behind the headline — the halo most product heroes sit in, and the one this site's own hero uses.

Size the ellipse wider than it is tall and pin it to the top edge; a centered circle reads as a spotlight on nothing.

.hero-glow {
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%,
    color-mix(in oklab, var(--primary) 16%, transparent),
    transparent 70%);
}

Corner light

Let brand light enter from one corner and rake across the surface — quieter than a hero glow, and a natural fit for cards and empty states.

Pick the corner once and keep it consistent across the app; light that changes direction between cards reads as a mistake.

.corner-light {
  background-image: radial-gradient(circle at 0% 0%,
    color-mix(in oklab, var(--primary) 14%, transparent),
    transparent 55%);
}

Split ambience

Balance a brand glow in one corner against a neutral shadow in the opposite one, so the surface tilts gently instead of pointing.

Keep the neutral layer far fainter than the brand layer — at equal strength the two lights cancel into mud.

.ambience {
  background-image:
    radial-gradient(circle at 15% 0%,
      color-mix(in oklab, var(--primary) 12%, transparent), transparent 50%),
    radial-gradient(circle at 100% 100%,
      color-mix(in oklab, var(--foreground) 5%, transparent), transparent 55%);
}

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

Mesh & auroraBuild mesh gradients, aurora veils, vignettes, and conic glows by stacking CSS radial gradients — atmosphere for heroes and marketing bands, no images.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