Spectrum 39

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions from left to right, moving from Dark Blue #16222A at the start to Blue #3A6073 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 (#16222A), Blue (#3A6073). Dark Blue is a deep, low-lightness tone — strong for text, headings and bold accents. Blue 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 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 Blue end.

Frequently asked questions

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

Vortex 28

linear 90°

1,198

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

Winter Frost 45

linear 270°

1,197

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

Neon City 40

linear 90°

1,196

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

Cherry Blossom 51

linear 45°

1,189

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

Nebula 23

linear 135°

1,185

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

Hue Shift 31

linear 45°

1,183

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

Cascade 15

linear 150°

1,179

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

Prism 26

linear 150°

1,178

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

Ocean Wave 5

linear 270°

1,175

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

Tone Fade 32

linear 90°

1,175

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

Summer Haze 9

linear 90°

1,174

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

Jade Garden 5

linear 90°

1,171

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

Twilight 35

linear 90°

1,169

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

Ocean Wave 50

linear 45°

1,166

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

Pulse 37

linear 135°

1,166

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

Peach Fuzz 5

linear 225°

1,166

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

Bloom 26

linear 135°

1,164

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

Light Burst 23

linear 150°

1,163

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

Cascade 16

linear 45°

1,156

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

Spring Bloom 46

linear 150°

1,155

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

Cosmic Ray 48

linear 225°

1,153

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

Solar Wind 49

linear 270°

1,152

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

Aurora 45

linear 45°

1,145

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

Honey Glow 22

linear 270°

1,129