Gradient Principles
When Gradients Work
- Background atmosphere (subtle, large area).
- Data visualization (heat maps, scales).
- Brand accents (signature gradient = brand recognition).
- Depth and dimension.
When They Don't
- Text backgrounds (readability issues).
- Small UI elements (gets muddy).
- "Because it looks cool" (needs purpose).
Gradient Types
- Linear: Two colors along a direction. Clean, simple.
- Radial: From center outward. Focal point effect.
- Conic: Around a center point. Clock-face effect.
- Mesh: Multiple color points blended. Organic, complex.
Building Good Gradients
- Use analogous colors (neighbors on the color wheel). They blend naturally.
- Avoid complementary gradients (red→green = brown muddy middle).
- Add a mid-point color to control the transition.
- Test on both light and dark backgrounds.
- Check contrast of any text over the gradient.
Cliches to Avoid
- Purple-to-pink (overused AI/tech default).
- Rainbow gradients (unless specifically on-brand).
- Gradient on every element (one gradient surface per view is usually enough).