Gradient Design

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

1. Use analogous colors (neighbors on the color wheel). They blend naturally.
2. Avoid complementary gradients (red→green = brown muddy middle).
3. Add a mid-point color to control the transition.
4. Test on both light and dark backgrounds.
5. 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).