PaletteCSS
Back to gradients
#C6FFDD
Light
#F7797D
50%
#FBD786
Dark

CSS Code

background: linear-gradient(90deg, #C6FFDD 0%, #F7797D 50%, #FBD786 100%);

Bloom 31

LINEAR 90°
5,035 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends 3 colours. The colour transitions from left to right, moving from Light Green #C6FFDD at the start to Yellow #FBD786 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 Light Green (#C6FFDD), Red (#F7797D), Yellow (#FBD786). Light Green is a light, airy tone — ideal for backgrounds and subtle fills. 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, #C6FFDD 0%, #F7797D 50%, #FBD786 100%) value and apply it to any element with the background property, for example: background: linear-gradient(90deg, #C6FFDD 0%, #F7797D 50%, #FBD786 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 (#C6FFDD and #FBD786) and the angle can be edited directly in the CSS to fine-tune the blend for your own design.

Related Gradients

linear-gradient(150deg, #D4FC79 0%, #96E6A1 100%)

Sunrise 33

linear 150°
linear-gradient(45deg, #348F50 0%, #56B4D3 100%)

Golden Hour 3

linear 45°
linear-gradient(225deg, #3D9970 0%, #2C3E50 100%)

Electric Blue 26

linear 225°
linear-gradient(45deg, #4ECDC4 0%, #44A08D 100%)

Arctic Ice 42

linear 45°
linear-gradient(150deg, #D4FC79 0%, #96E6A1 100%)

Deep Sea 13

linear 150°
linear-gradient(150deg, #C6FFDD 0%, #F7797D 50%, #FBD786 100%)

Tone Fade 11

linear 150°
linear-gradient(135deg, #6A9113 0%, #141517 100%)

Cherry Blossom 48

linear 135°
linear-gradient(90deg, #B8CDB0 0%, #DDE8C0 100%)

Prism 38

linear 90°
linear-gradient(90deg, #2C7744 0%, #5A3F37 100%)

Cherry Blossom 21

linear 90°
linear-gradient(225deg, #00F260 0%, #0575E6 100%)

Purple Rain 9

linear 225°
linear-gradient(270deg, #43E97B 0%, #38F9D7 100%)

Thunder Storm 44

linear 270°
linear-gradient(225deg, #AAFFA9 0%, #11FFBD 100%)

Midnight 39

linear 225°
linear-gradient(150deg, #4ECDC4 0%, #44A08D 100%)

Nebula 2

linear 150°
linear-gradient(270deg, #B7F8DB 0%, #50A7C2 100%)

Golden Hour 40

linear 270°
linear-gradient(90deg, #1D976C 0%, #93F9B9 100%)

Cherry Blossom 3

linear 90°
linear-gradient(45deg, #A8EDEA 0%, #FED6E3 100%)

Tone Fade

linear 45°
linear-gradient(135deg, #1D976C 0%, #93F9B9 100%)

Candy Pop 43

linear 135°
linear-gradient(270deg, #11998E 0%, #38EF7D 100%)

Shadow Play 12

linear 270°
linear-gradient(225deg, #56AB2F 0%, #A8E063 100%)

Lavender Dream 4

linear 225°
linear-gradient(270deg, #1D976C 0%, #93F9B9 100%)

Mint Breeze 23

linear 270°
linear-gradient(270deg, #D4FC79 0%, #96E6A1 100%)

Autumn Fire 23

linear 270°
linear-gradient(90deg, #4ECDC4 0%, #44A08D 100%)

Pulse 42

linear 90°
linear-gradient(90deg, #B7F8DB 0%, #50A7C2 100%)

Lavender Dream 30

linear 90°
linear-gradient(150deg, #3D9970 0%, #2C3E50 100%)

Spectrum 36

linear 150°
Copied!