Back to gradients
#232526
Light
#414345
Dark

CSS Code

background: linear-gradient(270deg, #232526 0%, #414345 100%);

Forest Mist 44

LINEAR 270°
926 Views

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions from right to left, moving from Charcoal #232526 at the start to Charcoal #414345 at the end. The result is a soft, versatile blend that works across many design styles.

The colours

The gradient is built from Charcoal (#232526), Charcoal (#414345). Charcoal is a deep, low-lightness tone — strong for text, headings and bold accents. 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 right to 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 Charcoal end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(270deg, #232526 0%, #414345 100%) value and apply it to any element with the background property, for example: background: linear-gradient(270deg, #232526 0%, #414345 100%);

Is this a linear or radial gradient?

It is a linear gradient set at 270 degrees, so the colour transitions along a straight line from right to left.

Can I change the colours or direction?

Yes. The two hex stops (#232526 and #414345) and the angle can be edited directly in the CSS to fine-tune the blend for your own design.

Related Gradients

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(45deg, #0D0D0D 0%, #1A1A2E 100%)

Cherry Blossom 51

linear 45°
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(150deg, #0F2027 0%, #203A43 50%, #2C5364 100%)

Cascade 15

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

Prism 26

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

Ocean Wave 5

linear 270°
linear-gradient(90deg, #0f0c29 0%, #302b63 100%)

Tone Fade 32

linear 90°
linear-gradient(90deg, #16222A 0%, #3A6073 100%)

Summer Haze 9

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

Jade Garden 5

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

Twilight 35

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

Ocean Wave 50

linear 45°
linear-gradient(135deg, #000000 0%, #434343 100%)

Pulse 37

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

Peach Fuzz 5

linear 225°
linear-gradient(135deg, #1A1A2E 0%, #E94560 100%)

Bloom 26

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

Light Burst 23

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

Cascade 16

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

Spring Bloom 46

linear 150°
linear-gradient(225deg, #200122 0%, #6F0000 100%)

Cosmic Ray 48

linear 225°
linear-gradient(270deg, #16222A 0%, #3A6073 100%)

Solar Wind 49

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

Aurora 45

linear 45°
linear-gradient(270deg, #0f0c29 0%, #302b63 100%)

Honey Glow 22

linear 270°
Copied!