Gradients

Layered gradients for depth and clarity

Balance contrast, stop positions, and add subtle radial accents.

Checklist

Gradient checklist

Three steps to a clean gradient

  • Pick 2–3 hues; avoid muddy mixes by spacing stops.
  • Add a radial highlight to guide the eye.
  • Keep text contrast with overlays or solid backing.

Demo

Layered blend

Linear base + radial glow

background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,0.16), transparent 45%),
  linear-gradient(135deg, #7c3aed, #6ee7ff);

Patterns

Use cases

Hero backgrounds, CTA cards, avatars

Glass header

Gradient + blur + soft border

background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.12);

Conic accent

Thin sweep for labels

background: conic-gradient(from 120deg, #6dd3ff, #ff7ce6, #6dd3ff);
mask: linear-gradient(90deg, transparent 0, black 25%, black 75%, transparent 100%);