PaletteCSS
Back to gradients
#FFF1EB
Light
#ACE0F9
Dark

CSS Code

background: linear-gradient(90deg, #FFF1EB 0%, #ACE0F9 100%);

Prism 20

LINEAR 90°
6,061 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions from left to right, moving from Light Orange #FFF1EB at the start to Light Teal #ACE0F9 at the end. Because it spans a warm and a cool tone, the transition feels dynamic and eye-catching.

The colours

The gradient is built from Light Orange (#FFF1EB), Light Teal (#ACE0F9). Light Orange is a light, airy tone — ideal for backgrounds and subtle fills. Light Teal 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 left to right, 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 Teal end.

Frequently asked questions

How do I use this gradient in CSS?

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

Is this a linear or radial gradient?

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

Can I change the colours or direction?

Yes. The two hex stops (#FFF1EB and #ACE0F9) 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(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°
linear-gradient(45deg, #FF6B6B 0%, #FFE66D 100%)

Cascade 43

linear 45°
Copied!