What makes a UI gradient look professional?

Treat the gradient as light, not as a color transition: stay inside one hue family, fade to transparent instead of a second color, and keep large surfaces under about 16% of the brand color. Full-strength ramps belong only on small accents like headlines and borders.

How do I stop gradient banding in CSS?

Banding appears when a soft ramp crosses many pixels with few color steps. Interpolate in oklab with color-mix, shorten the ramp so it fades sooner, and lay a 5–8% noise texture over wide gradients — the speckle breaks the visible steps apart.

How should gradients adapt to dark mode?

Mix every stop from theme tokens with color-mix so the gradient re-tints itself when the mode flips, then step the strength down a notch — a glow that whispers on white shouts on near-black. Never hard-code hex stops per mode.

Color & light reference

Gradients that read as light, not as decoration.

Tint the canvas with brand washes and glows, build mesh and aurora atmosphere for heroes, clip ramps into headlines and borders, and let surfaces drift — each pattern one CSS declaration, mixed from your theme tokens so both modes stay in key.

Browse gradients Design system reference

Start with restraint

Treat every gradient as a light source.

A useful gradient explains where the light comes from and gets out of the way. The moment a visitor sees a color transition before the content sitting on it, the surface has stopped being lit and started performing.

One hue: Vary the strength of a color, not the color itself.
Fade out: End on transparency so the surface, not a second color, wins.
Re-tint: Mix stops from theme tokens so both modes stay in key.
Earn motion: Animate glacially, and park on a still frame for reduced motion.

Gradient library

Choose the light that matches the surface.

These focused guides run from the quietest gradient to the loudest: soft washes and glows for working surfaces, mesh and aurora atmosphere for heroes, full-strength accents on text and edges, and motion for the few surfaces that earn it.

Tint & light

Washes & glows

Add quiet brand washes, hero glows, and corner light to app surfaces with soft CSS gradients mixed from your theme tokens in oklab.

4 gradients

Depth & atmosphere

Mesh & aurora

Build mesh gradients, aurora veils, vignettes, and conic glows by stacking CSS radial gradients — atmosphere for heroes and marketing bands, no images.

4 gradients

Ink & edges

Text & borders

Clip gradients into headlines, draw gradient borders and underlines, and fade divider rules with pure CSS — full-strength color on small areas.

4 gradients

Motion

Animated gradients

Animate gradient backgrounds with background-position pans, shimmer sweeps, and hue drift — ambient CSS motion with a reduced-motion fallback.

4 gradients

Loudness budget

Strength is priced by area.

The larger the surface, the fainter the ramp: a canvas wash whispers, a hero glow speaks, and only the smallest accents may use the brand color at full strength. Strengths are percentages of the token mixed with color-mix.

Surface	Strength	Reads as
App canvas wash	4–10%	Lit, not painted
Hero & marketing glow	10–18%	Atmosphere behind a headline
Mesh & aurora bands	12–20%	Decoration; no body text on top
Text, borders, rules	Full strength	Tiny area buys full color

Dark mode

Dim the light when the room goes dark.

Stops mixed from theme tokens re-tint themselves when the mode flips, but the perceived strength does not carry over: a glow that whispers on white shouts on near-black. Keep the declaration and step the mix percentage down.

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

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

Frequently asked

Gradient basics

What makes a UI gradient look professional?: Treat the gradient as light, not as a color transition: stay inside one hue family, fade to transparent instead of a second color, and keep large surfaces under about 16% of the brand color. Full-strength ramps belong only on small accents like headlines and borders.
How do I stop gradient banding in CSS?: Banding appears when a soft ramp crosses many pixels with few color steps. Interpolate in oklab with color-mix, shorten the ramp so it fades sooner, and lay a 5–8% noise texture over wide gradients — the speckle breaks the visible steps apart.
How should gradients adapt to dark mode?: Mix every stop from theme tokens with color-mix so the gradient re-tints itself when the mode flips, then step the strength down a notch — a glow that whispers on white shouts on near-black. Never hard-code hex stops per mode.

From light to application

Ship the gradient inside a complete design system.

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

Start planning free