The three rules
- Two hues maximum (three only when one is a near-neutral). Every extra hue multiplies the chance of mud.
- Keep hue steps tight — roughly 60–140° apart on the wheel. The violet→cyan family is 90° apart and safe; violet→red is 40° and reads as one colour's mood swing.
- Never blend through the greys. If two hues sit opposite the wheel, the midpoint goes brown — that's the 'cheap' look, every time.
Text gradients are a specific art
gradient-text.css
.gradient-word {
background-image: linear-gradient(100deg,
#c4b5fd, #a5b4fc 34%, #67e8f9 68%, #f9a8d4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* rule: only for display type 40px+. Small text + gradient = shimmer */
/* rule: keep the lightest stop under 70% lightness for AA on dark */When solid beats gradient
The stop rule
If you can't say what the gradient means (brand direction, light source, data encoding), use a solid token colour. Gradients are for atmosphere and hierarchy moments — a whole UI in gradients is a rainbow, not a design system.
Finish with noise
The most expensive-looking gradients hide banding. A 2–4% film-grain overlay (SVG turbulence or feTurbulence data-URI) breaks up the bands and gives the surface a photographic finish. It's the same trick print designers have used for a century.