Gradient stops
Blush
#FBCFE8 0% Pink
#EC4899 52% Berry
#9D174D 100% CSS gradient
Pink Gradient
A pink gradient from soft blush through vivid pink to deep berry.
A warm expressive gradient for decorative surfaces, social graphics, and product accents.
Pink gradients can range from soft blush to deep berry or move toward violet/orange for a stronger hue transition.
CSS
.example {
background: linear-gradient(135deg, #FBCFE8 0%, #EC4899 52%, #9D174D 100%);
}Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.
Angle previews
90°
135°
180°
Ready-to-use variations
Blush to berry
Broad light-to-dark pink range.
linear-gradient(135deg, #FCE7F3 0%, #F472B6 50%, #9D174D 100%) Pink violet
Cool expressive route.
linear-gradient(125deg, #F9A8D4 0%, #EC4899 48%, #8B5CF6 100%) Pink coral
Warmer transition toward coral/orange.
linear-gradient(145deg, #FBCFE8 0%, #FB7185 52%, #F97316 100%) Tuning tips
- Light pink stops usually require dark foreground text.
- Deep berry stops can change the best text color across one surface.
- Keep decorative pink gradients separate from semantic error/success meaning.
Related gradients
Orange Gradient
An orange gradient from light peach through vivid orange to deep burnt orange.
Red Gradient
A red gradient from soft coral-red through vivid red to deep crimson.
Sunset Gradient
A sunset gradient moving from twilight purple through pink and orange to golden yellow.
Black Gradient
A restrained dark gradient from near-black navy through charcoal to soft black.