High ContrastLinear · 2 stops
Pink CSS gradients
Browse pink CSS gradients from blush and rose to fuchsia and magenta, with linear and radial examples. These 24 selected examples come from the existing gradient library.
Use this gradient.
Pink blends make warm, friendly highlights for cards, badges and hero areas. Keep the most saturated blends small and let a softer blush blend cover larger surfaces.
Text over gradients.
Blush stops are light and fuchsia stops are mid-tone, so neither white nor mid-grey text is safe across a whole blend. Check labels against the stop they actually sit on.
CSS for Magenta Burst
background: linear-gradient(135deg, #F496AF 0%, #F527BF 100%);
background: linear-gradient(135deg in oklab, #F496AF 0%, #F527BF 100%);The first declaration supplies an sRGB fallback; the second interpolates in OKLab. Create a gradient with your own colours and stops.