Gradient
You might say
Instead of a solid background, let the color fade from blue into purple.
Blend colors gradually across an areaA gradient moves smoothly between two or more colors. It can add depth, direction, or emphasis to a background and illustration. Keep text contrast stable across the whole blend, and use a flat color when the gradient adds no meaning.
When to use it
- Create a soft hero background
- Show a value range or heat scale
- Add depth to a decorative surface
- Connect two related brand colors
When NOT to use it
- Place text over a region with changing low contrast
- Combine too many unrelated colors
- Use a gradient on every surface
- Treat a decorative blend as a data scale
Anatomy
⟶
Where the gradient begins
The angle of a linear gradient — it sets the sense of flow
Midway colors — add more for three-color blends and beyond
Where the gradient lands
Variants
Linear
Hero backgrounds — direction brings energy
Radial
Focuses the subject with a halo effect
Duotone
Young, trendy campaign pages
Tonal
When you want subtle depth without introducing another hue
Typical use cases
Hero background
Data scale
Button accent
Messages
＋
M
Maya Lin sent you the final draft
10:24
✦
Inspo Digest this week's picks are live
09:02
Illustration surface
Monthly Active Users
12,408
↑ 8.2% vs last month
Avg. Session Length
6m 42s
↑ 3.1% vs last month
Further reading