How do I write a pink gradient in CSS?

Use linear-gradient() with two or more pink hex stops, for example background: linear-gradient(135deg, #EC4899 0%, #FBCFE8 100%);. Add a deeper magenta at 0% for a more dramatic transition.

Which pink gradient works best for a beauty brand?

Blush Linen and Peach Glow read as soft and skincare-aligned; Rose Velvet and Magenta Studio read as bolder, more editorial. Match the gradient temperature to the brand's existing photography.

Is a pink-to-purple gradient still a pink gradient?

Yes, when the pink stop covers the larger share of the track. Dahlia Field shows this — magenta at 0%, pink-rose at 100%, with the pink dominating the visual midpoint.

How do I keep a bright pink gradient from feeling overwhelming?

Cap the gradient height (under 480px), set surrounding surfaces to canvas or warm neutral, and use a single bright stop rather than two competing peaks. Coral Sunset uses this approach for CTAs.

Can I use a pink gradient for dark mode?

Yes. Wine Velvet, Magenta Studio, and Sakura Spotlight all anchor at a deep stop that holds white text on a dark background. Avoid blush-only gradients in dark mode — they wash out.

Gradient library · Pink

Pink gradient CSS — blush, rose, magenta.

Ten pink gradients tuned for beauty, lifestyle, social, and editorial surfaces. Each preset includes the CSS, the hex stops, and the surface it was designed for — copy a line and ship.

Magenta Studio · #831843 → #EC4899 → #FBCFE8

The hex codes.

Five anchor colors that show up across every preset in this library. Copy any one to use it directly.

Anchor dark
Wine
#500724
Mid dark
Plum Rose
#831843
Mid
Studio Magenta
#EC4899
Tint
Blush
#F9A8D4
Surface
Linen Pink
#FFE4E6

The preset library.

Copy the CSS in one tap, or open any preset in the generator to adjust angle, stops, and type.

Magenta Studio
Hero background · linear · 135°
- #831843· 0%
- #EC4899· 60%
- #FBCFE8· 100%
```
background: linear-gradient(135deg, #831843 0%, #EC4899 60%, #FBCFE8 100%);
```
Open in gradient generator →
Blush Linen
Surface tile · linear · 180°
- #FFE4E6· 0%
- #FECDD3· 100%
```
background: linear-gradient(180deg, #FFE4E6 0%, #FECDD3 100%);
```
Open in gradient generator →
Rose Velvet
Editorial panel · linear · 120°
- #BE185D· 0%
- #F472B6· 100%
```
background: linear-gradient(120deg, #BE185D 0%, #F472B6 100%);
```
Open in gradient generator →
Coral Sunset
CTA button · linear · 90°
- #FB7185· 0%
- #F472B6· 100%
```
background: linear-gradient(90deg, #FB7185 0%, #F472B6 100%);
```
Open in gradient generator →
Bubblegum
Light hero · linear · 90°
- #FCE7F3· 0%
- #F9A8D4· 100%
```
background: linear-gradient(90deg, #FCE7F3 0%, #F9A8D4 100%);
```
Open in gradient generator →
Wine Velvet
Brand surface · linear · 200°
- #500724· 0%
- #DB2777· 100%
```
background: linear-gradient(200deg, #500724 0%, #DB2777 100%);
```
Open in gradient generator →
Peach Glow
Light marketing hero · linear · 160°
- #FFE4D6· 0%
- #FB7185· 100%
```
background: linear-gradient(160deg, #FFE4D6 0%, #FB7185 100%);
```
Open in gradient generator →
Sakura Spotlight
Spotlight card · radial
- #FFE4E6· 0%
- #EC4899· 70%
- #831843· 100%
```
background: radial-gradient(circle at center, #FFE4E6 0%, #EC4899 70%, #831843 100%);
```
Open in gradient generator →
Dahlia Field
Editorial cover · linear · 135°
- #A21CAF· 0%
- #F472B6· 100%
```
background: linear-gradient(135deg, #A21CAF 0%, #F472B6 100%);
```
Open in gradient generator →
Bloom Wheel
Decorative ring · conic · 0°
- #EC4899· 0%
- #FB7185· 33%
- #A21CAF· 66%
- #EC4899· 100%
```
background: conic-gradient(from 0deg at center, #EC4899 0%, #FB7185 33%, #A21CAF 66%, #EC4899 100%);
```
Open in gradient generator →

Pinks

How to use this gradient family.

Pink gradients, from blush to magenta.

Pink covers more emotional ground than designers usually credit it for. A blush-to-linen wash reads as serene and grown-up — the register of skincare, wellness, and lifestyle brands. A magenta-to-rose gradient reads as confident and editorial — Vogue, Vivienne Westwood, the cover of a 1980s record. A coral-to-pink CTA reads as friendly urgency, which is why beauty and DTC brands have leaned on it so heavily. Pick the temperature first: warm pinks (peach, coral) feel approachable, cool pinks (rose, magenta) feel composed.

Pink gradients and dopamine design.

The post-2020 dopamine palette — bright, optimistic, sometimes brash — leans on pink gradients more than any other family. Bubblegum and Coral Sunset belong to that lineage: high-saturation, high-contrast, and unapologetically loud. Used carefully, they cut through a feed; used everywhere, they fatigue the eye. Pair a dopamine pink with a quiet neutral (canvas or stone) for the rest of the page so the gradient stays the headline.

Text on pink without losing the brand.

Deep magentas, plums, and wines (#500724, #831843, #BE185D) carry white text at WCAG AAA. Mid pinks (#EC4899, #F472B6) carry white at AA when the font weight is 500 or heavier. Blush and bubblegum tints require dark ink — #1d1d1f or a warm near-black — for body copy. Avoid mid-pink for body text on white surfaces; it lives between the dark and light thresholds and rarely passes either.

How to use the pinks gradient library.

Step 1
Pick a preset
Choose the pink preset that matches your surface and brand temperature.
Step 2
Copy the CSS
Tap copy on the preset card to grab the background declaration.
Step 3
Tune the angle
Open the preset in the gradient generator if you want to adjust angle or add an extra stop.

Frequently asked questions.

How do I write a pink gradient in CSS?: Use linear-gradient() with two or more pink hex stops, for example background: linear-gradient(135deg, #EC4899 0%, #FBCFE8 100%);. Add a deeper magenta at 0% for a more dramatic transition.
Which pink gradient works best for a beauty brand?: Blush Linen and Peach Glow read as soft and skincare-aligned; Rose Velvet and Magenta Studio read as bolder, more editorial. Match the gradient temperature to the brand's existing photography.
Is a pink-to-purple gradient still a pink gradient?: Yes, when the pink stop covers the larger share of the track. Dahlia Field shows this — magenta at 0%, pink-rose at 100%, with the pink dominating the visual midpoint.
How do I keep a bright pink gradient from feeling overwhelming?: Cap the gradient height (under 480px), set surrounding surfaces to canvas or warm neutral, and use a single bright stop rather than two competing peaks. Coral Sunset uses this approach for CTAs.
Can I use a pink gradient for dark mode?: Yes. Wine Velvet, Magenta Studio, and Sakura Spotlight all anchor at a deep stop that holds white text on a dark background. Avoid blush-only gradients in dark mode — they wash out.