PaletteCSS
Back to gradients
#C9C9C9
Light
#404040
Dark

CSS Code

background: linear-gradient(90deg, #C9C9C9 0%, #404040 100%);

Gray Linear Gradient

LINEAR 90°
3 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 Light Gray #C9C9C9 at the start to Charcoal #404040 at the end. The result is a soft, versatile blend that works across many design styles.

The colours

The gradient is built from Light Gray (#C9C9C9), Charcoal (#404040). Light Gray is a light, airy tone — ideal for backgrounds and subtle fills. Charcoal is a deep, low-lightness tone — strong for text, headings and bold accents.

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 two colours have strong contrast against each other, but always check text placed on top of the gradient — dark text reads best over the lighter end and light text over the darker end. Aim for a contrast ratio of at least 4.5:1 for body text.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(90deg, #C9C9C9 0%, #404040 100%) value and apply it to any element with the background property, for example: background: linear-gradient(90deg, #C9C9C9 0%, #404040 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 (#C9C9C9 and #404040) and the angle can be edited directly in the CSS to fine-tune the blend for your own design.

Related Gradients

linear-gradient(270deg, #A18CD1 0%, #FBC2EB 100%)

Midnight 50

linear 270°
linear-gradient(45deg, #3494E6 0%, #EC6EAD 100%)

Bloom 20

linear 45°
linear-gradient(90deg, #200122 0%, #6F0000 100%)

Vortex 28

linear 90°
linear-gradient(270deg, #0F0C29 0%, #302B63 50%, #24243E 100%)

Winter Frost 45

linear 270°
linear-gradient(90deg, #1F1C2C 0%, #928DAB 100%)

Neon City 40

linear 90°
linear-gradient(225deg, #4776E6 0%, #8E54E9 100%)

Flux 42

linear 225°
linear-gradient(135deg, #E2B0FF 0%, #9F44D3 100%)

Peach Fuzz 17

linear 135°
linear-gradient(270deg, #2BC0E4 0%, #EAECC6 100%)

Tone Fade 26

linear 270°
linear-gradient(45deg, #4CA1AF 0%, #C4E0E5 100%)

Moon Glow 20

linear 45°
linear-gradient(45deg, #0D0D0D 0%, #1A1A2E 100%)

Cherry Blossom 51

linear 45°
linear-gradient(150deg, #3494E6 0%, #EC6EAD 100%)

Cherry Blossom 50

linear 150°
linear-gradient(45deg, #4776E6 0%, #8E54E9 100%)

Sunrise 2

linear 45°
linear-gradient(225deg, #5C258D 0%, #4389A2 100%)

Ripple 27

linear 225°
linear-gradient(135deg, #141E30 0%, #243B55 100%)

Nebula 23

linear 135°
linear-gradient(45deg, #0D0D0D 0%, #1A1A2E 100%)

Hue Shift 31

linear 45°
linear-gradient(135deg, #373B44 0%, #4286F4 100%)

Neon City 35

linear 135°
linear-gradient(135deg, #1CB5E0 0%, #000851 100%)

Twilight 48

linear 135°
linear-gradient(135deg, #1CB5E0 0%, #000851 100%)

Tone Fade 18

linear 135°
linear-gradient(150deg, #2C3E50 0%, #4CA1AF 100%)

Golden Hour 43

linear 150°
linear-gradient(150deg, #0F2027 0%, #203A43 50%, #2C5364 100%)

Cascade 15

linear 150°
linear-gradient(225deg, #C9D6FF 0%, #E2E2E2 100%)

Sunrise 37

linear 225°
linear-gradient(150deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%)

Prism 26

linear 150°
linear-gradient(270deg, #1CB5E0 0%, #000851 100%)

Pulse 18

linear 270°
linear-gradient(135deg, #4568DC 0%, #B06AB3 100%)

Flux 45

linear 135°
Copied!