Pastel gradient
A pastel gradient blends colors that are already mostly white, which changes the rules: with saturation low everywhere, hues that would clash at full strength sit together peacefully, and the muddy midpoints that ruin bold gradients never get dark enough to matter. It is the one family where almost any pairing works.
5pastel gradients, ready to use
These stops come from the site's pastel palette, each one a bright hue with the same amount of white mixed in, which is what keeps the set coherent. Cotton candy is the definitive pairing. The full sweep uses five stops and still stays calm, something no saturated family can do, and every version holds dark text end to end.
Full sweep
linear-gradient(90deg, #FFD1DC, #FFF3C4, #D7F9E0, #CDECF9, #E5D4FF)
Five hues in one run and still calm, which no saturated family can manage.
Common questions
- What exactly makes a color pastel?
- High lightness and low saturation: a bright hue with white mixed in until the shout becomes a murmur. The hue survives, which is why pastels still read as pink or blue or mint, but the intensity that causes clashing is gone. Any color has a pastel version; a few, like peach and lavender, are better known in that form than at full strength.
- Why can pastel gradients combine hues that normally clash?
- Clashes happen between saturations as much as between hues, and the grey midpoint problem needs darkness to show. Pastels have neither full saturation nor darkness, so pink into mint, a disaster at full strength, blends through a pale tone that reads as simply another pastel.
- Where do pastel gradients fit best?
- Wherever softness is the message: onboarding screens, wellness and baby contexts, spring campaigns, and any background that must hold dark text over its whole area. Their weakness is authority; a pastel call-to-action whispers, so pair the background with one saturated accent that does the asking.