PaletteCSS
Back to gradients
#B7F8DB
Light
#50A7C2
Dark

CSS Code

background: linear-gradient(225deg, #B7F8DB 0%, #50A7C2 100%);

Neon City 50

LINEAR 225°
4,776 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions diagonally from top-right to bottom-left, moving from Light Green #B7F8DB at the start to Teal #50A7C2 at the end. Both ends are cool tones, so the blend reads as calm, fresh and modern.

The colours

The gradient is built from Light Green (#B7F8DB), Teal (#50A7C2). Light Green is a light, airy tone — ideal for backgrounds and subtle fills. Teal is a balanced mid-tone that works well for primary surfaces and UI elements.

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-right to bottom-left, 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 Teal end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(225deg, #B7F8DB 0%, #50A7C2 100%) value and apply it to any element with the background property, for example: background: linear-gradient(225deg, #B7F8DB 0%, #50A7C2 100%);

Is this a linear or radial gradient?

It is a linear gradient set at 225 degrees, so the colour transitions along a straight line diagonally from top-right to bottom-left.

Can I change the colours or direction?

Yes. The two hex stops (#B7F8DB and #50A7C2) 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!