PaletteCSS
Back to gradients
#0F2027
Light
#203A43
50%
#2C5364
Dark

CSS Code

background: linear-gradient(270deg, #0F2027 0%, #203A43 50%, #2C5364 100%);

Bloom 25

LINEAR 270°
3,056 Views

Tags

Copy & Download

About this gradient

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

Frequently asked questions

How do I use this gradient in CSS?

Copy the linear-gradient(270deg, #0F2027 0%, #203A43 50%, #2C5364 100%) value and apply it to any element with the background property, for example: background: linear-gradient(270deg, #0F2027 0%, #203A43 50%, #2C5364 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 (#0F2027 and #2C5364) 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!