PaletteCSS
Back to gradients
#EE9CA7
Light
#FFDDE1
Dark

CSS Code

background: linear-gradient(270deg, #EE9CA7 0%, #FFDDE1 100%);

Hue Shift 27

LINEAR 270°
2,420 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions from right to left, moving from Red #EE9CA7 at the start to Light Red #FFDDE1 at the end. Both ends sit on the warm side of the spectrum, giving the blend an energetic, sunny feel.

The colours

The gradient is built from Red (#EE9CA7), Light Red (#FFDDE1). Red is a vivid, saturated tone that draws the eye — best for accents and highlights. Light Red is a light, airy tone — ideal for backgrounds and subtle fills.

Where to use it

This linear gradient suits hero sections, call-to-action buttons, cards and section dividers. Because the colour travels from right to left, it pairs naturally with content laid out along the same axis, guiding the eye through the design. Use it full-width for impact or as a subtle button background.

Text & accessibility

The colours are close in tone, so this gradient works best as a decorative background rather than behind small text. If you do place text over it, use a solid overlay or pick text colour that clears the 4.5:1 WCAG contrast ratio against the Light Red end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(270deg, #EE9CA7 0%, #FFDDE1 100%) value and apply it to any element with the background property, for example: background: linear-gradient(270deg, #EE9CA7 0%, #FFDDE1 100%);

Is this a linear or radial gradient?

It is a linear gradient set at 270 degrees, so the colour transitions along a straight line from right to left.

Can I change the colours or direction?

Yes. The two hex stops (#EE9CA7 and #FFDDE1) and the angle can be edited directly in the CSS to fine-tune the blend for your own design.

Related Gradients

linear-gradient(135deg, #FDC830 0%, #F37335 100%)

Light Burst 12

linear 135°
linear-gradient(270deg, #FFB347 0%, #FFCC33 100%)

Cascade 30

linear 270°
linear-gradient(150deg, #FFB347 0%, #FFCC33 100%)

Tone Fade 20

linear 150°
linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%)

Honey Glow 5

linear 135°
linear-gradient(270deg, #FBC2EB 0%, #A6C1EE 100%)

Pulse 27

linear 270°
linear-gradient(45deg, #F7797D 0%, #FBD786 50%, #C6FFDD 100%)

Purple Rain 24

linear 45°
linear-gradient(90deg, #FF9A9E 0%, #FECFEF 100%)

Rose Petal 45

linear 90°
linear-gradient(150deg, #FFF1EB 0%, #ACE0F9 100%)

Pulse 30

linear 150°
linear-gradient(135deg, #FBC2EB 0%, #A6C1EE 100%)

Tone Fade 27

linear 135°
linear-gradient(135deg, #FAD0C4 0%, #FFD1FF 100%)

Golden Hour 9

linear 135°
linear-gradient(135deg, #FDC830 0%, #F37335 100%)

Aurora 42

linear 135°
linear-gradient(225deg, #FDDB92 0%, #D1FDFF 100%)

Hue Shift 16

linear 225°
linear-gradient(225deg, #FF9A9E 0%, #FECFEF 50%, #FECFEF 100%)

Candy Pop 49

linear 225°
linear-gradient(90deg, #FFF1EB 0%, #ACE0F9 100%)

Prism 20

linear 90°
linear-gradient(225deg, #FBC2EB 0%, #A6C1EE 100%)

Cascade 37

linear 225°
linear-gradient(225deg, #FF9A9E 0%, #FECFEF 50%, #FECFEF 100%)

Cascade 19

linear 225°
linear-gradient(135deg, #FDDB92 0%, #D1FDFF 100%)

Mint Breeze 6

linear 135°
linear-gradient(90deg, #FAD0C4 0%, #FFD1FF 100%)

Candy Pop 39

linear 90°
linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%)

Bloom 35

linear 135°
linear-gradient(135deg, #FF6B6B 0%, #FFE66D 100%)

Deep Sea 43

linear 135°
linear-gradient(90deg, #FFF1EB 0%, #ACE0F9 100%)

Forest Mist 50

linear 90°
linear-gradient(225deg, #FF6B6B 0%, #FFE66D 100%)

Tone Fade 33

linear 225°
linear-gradient(225deg, #FDDB92 0%, #D1FDFF 100%)

Winter Frost 11

linear 225°
linear-gradient(135deg, #FDA085 0%, #F6D365 100%)

Pulse 46

linear 135°
Copied!