PaletteCSS
Back to gradients
#0F0C29
Light
#302B63
50%
#24243E
Dark

CSS Code

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

Ripple 35

LINEAR 90°
6,121 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 Dark Blue #0F0C29 at the start to Dark Blue #24243E at the end. Both ends are cool tones, so the blend reads as calm, fresh and modern.

The colours

The gradient is built from Dark Blue (#0F0C29), Dark Blue (#302B63), Dark Blue (#24243E). Dark Blue is a deep, low-lightness tone — strong for text, headings and bold accents. Dark Blue 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 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 Dark Blue end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(90deg, #0F0C29 0%, #302B63 50%, #24243E 100%) value and apply it to any element with the background property, for example: background: linear-gradient(90deg, #0F0C29 0%, #302B63 50%, #24243E 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 (#0F0C29 and #24243E) 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!