PaletteCSS
Back to gradients
#A4F000
Light
#FF8624
Dark

CSS Code

background: linear-gradient(90deg, #A4F000 0%, #FF8624 100%);

Horse

LINEAR 90°
36 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 Lime #A4F000 at the start to Orange #FF8624 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 Lime (#A4F000), Orange (#FF8624). Lime is a vivid, saturated tone that draws the eye — best for accents and highlights. Orange 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 Orange end.

Frequently asked questions

How do I use this gradient in CSS?

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

Neon City

linear 225°
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(225deg, #FF512F 0%, #F09819 100%)

Lavender Dream 13

linear 225°
linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%)

Honey Glow 5

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

Vortex 29

linear 225°
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(225deg, #F12711 0%, #F5AF19 100%)

Vortex 29

linear 225°
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(90deg, #F7971E 0%, #FFD200 100%)

Hue Shift 24

linear 90°
linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%)

Bloom 35

linear 135°
Copied!