PaletteCSS
Back to gradients
#200122
Light
#6F0000
Dark

CSS Code

background: linear-gradient(270deg, #200122 0%, #6F0000 100%);

Sunrise 48

LINEAR 270°
1,454 Views

Tags

Copy & Download

About this gradient

This is a linear CSS gradient that blends two colours. The colour transitions from right to left, moving from Black #200122 at the start to Dark Red #6F0000 at the end. Both ends sit on the warm side of the spectrum, giving the blend an energetic, sunny feel.

The colours

The gradient is built from Black (#200122), Dark Red (#6F0000). Black is a deep, low-lightness tone — strong for text, headings and bold accents. Dark Red 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 Dark Red end.

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(270deg, #200122 0%, #6F0000 100%) value and apply it to any element with the background property, for example: background: linear-gradient(270deg, #200122 0%, #6F0000 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 (#200122 and #6F0000) 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!