designmotionhq

visual

Gradient Design

Why your gradients look cheap

Watch on Instagram

Key insights

  • Cheap-looking gradients usually travel too far across the hue wheel. Neighboring hues (teal → cyan) blend cleanly; opposites (orange → blue) create a muddy gray dead zone in the middle.
  • Keep lightness moving in one direction. A gradient that gets darker, then lighter, then darker again reads as banding.
  • Gradients work best as ambiance, not surface: a soft radial glow behind content beats a full-bleed linear wash on top of it.
  • Subtle grain on top of a gradient hides banding on cheap displays and adds perceived texture.

Do / Don't

  • Do: stay within 60° of hue travel, add 2–3% noise, and test on a low-quality screen.
  • Don't: put body text directly on a gradient's mid-transition zone — contrast is unpredictable there.

Want Claude to build this correctly?

UX Engine gives Claude Code the senior-designer reasoning behind every pattern.

The Design System Blueprint

An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.

Get the Blueprint — free

The PDF, plus emails about new patterns and my tools. Unsubscribe anytime.

Related patterns