Use gradients with intent
Gradients can signal brand personality or guide attention. Poorly chosen stops create noise; well-built ones feel premium.
Choosing stops
- Anchor with a brand hue, then offset with a complementary or analogous stop
- Avoid muddy midpoints by adjusting lightness instead of saturation alone
- Limit to 2–3 stops for UI surfaces; more is for art, not product UI
Application patterns
Use gradients sparingly: hero backgrounds, CTA highlights, or chart overlays. Keep text on gradients high-contrast with overlays.
Performance & export
- Prefer CSS gradients over heavy image assets
- Use subtle noise overlays to reduce banding
- Test dark/light theme variants to maintain readability