PaletteCSS
Back to gradients
#FF6B6B
Light
#FFE66D
Dark

CSS Code

background: linear-gradient(90deg, #FF6B6B 0%, #FFE66D 100%);

Rose Petal

LINEAR 90°
3,861 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 Red #FF6B6B at the start to Yellow #FFE66D 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 (#FF6B6B), Yellow (#FFE66D). Red is a vivid, saturated tone that draws the eye — best for accents and highlights. Yellow is a vivid, saturated tone that draws the eye — best for accents and highlights.

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 Yellow end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(90deg, #FF6B6B 0%, #FFE66D 100%) value and apply it to any element with the background property, for example: background: linear-gradient(90deg, #FF6B6B 0%, #FFE66D 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 (#FF6B6B and #FFE66D) 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!