PaletteCSS
Back to gradients
#FF6B6B
Light
#FFE66D
Dark

CSS Code

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

Color Drift 13

LINEAR 150°
2,916 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions diagonally from top-left to bottom-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 diagonally from top-left to bottom-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(150deg, #FF6B6B 0%, #FFE66D 100%) value and apply it to any element with the background property, for example: background: linear-gradient(150deg, #FF6B6B 0%, #FFE66D 100%);

Is this a linear or radial gradient?

It is a linear gradient set at 150 degrees, so the colour transitions along a straight line diagonally from top-left to bottom-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!