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.
You can say this to an AI Agent
Keep the blue-purple hero gradient but check every area behind the heading, adjusting stops, overlay, or placement for readability and adding a solid fallback. Do not spread it across the page; retest themes and mobile wrapping.
When to use it
- Create a soft hero background
- Show a value range or heat scaleStart
- Add depth to a decorative surface
- Connect two related brand colors
When NOT to use it
- Place text over a region with changing low contrastThe summer promotion starts today. Sign in to claim your reward.
- Combine too many unrelated colorsMembership benefits
- 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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check