PaletteCSS
Back to gradients
#F7971E
Light
#FFD200
Dark

CSS Code

background: linear-gradient(90deg, #F7971E 0%, #FFD200 100%);

Hue Shift 24

LINEAR 90°
1,228 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 Orange #F7971E at the start to Yellow #FFD200 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 Orange (#F7971E), Yellow (#FFD200). Orange 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, #F7971E 0%, #FFD200 100%) value and apply it to any element with the background property, for example: background: linear-gradient(90deg, #F7971E 0%, #FFD200 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 (#F7971E and #FFD200) 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(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°
linear-gradient(135deg, #C94B4B 0%, #4B134F 100%)

Electric Blue 20

linear 135°
Copied!