Shadow Play 10

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 Dark Violet #1F1C2C at the start to Muted Blue #928DAB 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 Violet (#1F1C2C), Muted Blue (#928DAB). Dark Violet is a deep, low-lightness tone — strong for text, headings and bold accents. Muted Blue is a soft, muted tone that suits calm backgrounds and large surfaces.

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 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

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