PaletteCSS
Back to gradients
#F12711
Light
#F5AF19
Dark

CSS Code

background: linear-gradient(135deg, #F12711 0%, #F5AF19 100%);

Hue Shift 19

LINEAR 135°
1,356 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 #F12711 at the start to Yellow #F5AF19 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 (#F12711), Yellow (#F5AF19). 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(135deg, #F12711 0%, #F5AF19 100%) value and apply it to any element with the background property, for example: background: linear-gradient(135deg, #F12711 0%, #F5AF19 100%);

Is this a linear or radial gradient?

It is a linear gradient set at 135 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 (#F12711 and #F5AF19) and the angle can be edited directly in the CSS to fine-tune the blend for your own design.

Related Gradients

linear-gradient(225deg, #F12711 0%, #F5AF19 100%)

Neon City

linear 225°
linear-gradient(225deg, #FF512F 0%, #F09819 100%)

Lavender Dream 13

linear 225°
linear-gradient(225deg, #F12711 0%, #F5AF19 100%)

Vortex 29

linear 225°
linear-gradient(225deg, #F12711 0%, #F5AF19 100%)

Vortex 29

linear 225°
linear-gradient(90deg, #F7971E 0%, #FFD200 100%)

Hue Shift 24

linear 90°
linear-gradient(270deg, #F12711 0%, #F5AF19 100%)

Wave Form 19

linear 270°
linear-gradient(135deg, #F7971E 0%, #FFD200 100%)

Candy Pop 34

linear 135°
linear-gradient(150deg, #F12711 0%, #F5AF19 100%)

Moon Glow 19

linear 150°
linear-gradient(270deg, #C94B4B 0%, #4B134F 100%)

Light Burst 20

linear 270°
linear-gradient(270deg, #FF416C 0%, #FF4B2B 100%)

Crimson Tide 18

linear 270°
linear-gradient(225deg, #C94B4B 0%, #4B134F 100%)

Mint Breeze 30

linear 225°
linear-gradient(45deg, #E44D26 0%, #F16529 100%)

Spring Bloom 47

linear 45°
linear-gradient(150deg, #DA4453 0%, #89216B 100%)

Color Drift 31

linear 150°
linear-gradient(270deg, #E44D26 0%, #F16529 100%)

Peach Fuzz 7

linear 270°
linear-gradient(270deg, #FF512F 0%, #F09819 100%)

Fade 33

linear 270°
linear-gradient(270deg, #F12711 0%, #F5AF19 100%)

Wave Form 19

linear 270°
linear-gradient(135deg, #C94B4B 0%, #4B134F 100%)

Electric Blue 20

linear 135°
linear-gradient(225deg, #FF512F 0%, #F09819 100%)

Pulse 43

linear 225°
linear-gradient(270deg, #DA4453 0%, #89216B 100%)

Purple Rain 11

linear 270°
linear-gradient(270deg, #F7971E 0%, #FFD200 100%)

Mint Breeze 14

linear 270°
linear-gradient(90deg, #E44D26 0%, #F16529 100%)

Aurora 47

linear 90°
linear-gradient(45deg, #FF416C 0%, #FF4B2B 100%)

Coral Reef 8

linear 45°
linear-gradient(225deg, #FF0099 0%, #FF6600 100%)

Pulse 25

linear 225°
linear-gradient(225deg, #DA4453 0%, #89216B 100%)

Neon City 41

linear 225°
Copied!