radial-gradient(circle, #1A1A2E 0%, #16213E 50%, #0F3460 100%)
Midnight 46
radial
Back to gradients
#0F2027
Light
#203A43
50%
#2C5364
Dark
CSS Code
Hue Shift 35
RADIAL
CIRCLE
1,455
Views
Copy & Download
About this gradient
This is a radial CSS gradient that blends 3 colours. The colour transitions outward from the centre in smooth concentric rings, 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
Radial gradients like this one work well as spotlight backgrounds, soft card glows, button hovers and hero backdrops where you want attention drawn toward a central focal point. Apply it to a full-width section for a subtle depth effect, or to a smaller element for a glowing accent.
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 radial-gradient(circle, #0F2027 0%, #203A43 50%, #2C5364 100%) value and apply it to any element with the background property, for example: background: radial-gradient(circle, #0F2027 0%, #203A43 50%, #2C5364 100%);
Is this a linear or radial gradient?
It is a radial gradient — the colour radiates outward from a central point in concentric rings, which suits circular highlights, spotlights and soft backdrops.
Can I change the colours or direction?
Yes. The two hex stops (#0F2027 and #2C5364) and the shape can be edited directly in the CSS to fine-tune the blend for your own design.
Related Gradients
radial-gradient(circle, #232526 0%, #414345 100%)
Coral Reef 44
radial
radial-gradient(circle, #1A1A2E 0%, #16213E 50%, #0F3460 100%)
Ripple 16
radial
radial-gradient(circle, #0F2027 0%, #203A43 50%, #2C5364 100%)
Cherry Blossom 5
radial
radial-gradient(circle, #000000 0%, #434343 100%)
Honey Glow 27
radial
radial-gradient(circle, #0F0C29 0%, #302B63 50%, #24243E 100%)
Vortex 15
radial
radial-gradient(circle, #0f0c29 0%, #302b63 100%)
Rose Petal 12
radial
radial-gradient(circle, #141E30 0%, #243B55 100%)
Twilight 43
radial
radial-gradient(circle, #0F0C29 0%, #302B63 50%, #24243E 100%)
Deep Sea 15
radial
radial-gradient(circle, #0D0D0D 0%, #1A1A2E 100%)
Bloom 21
radial
radial-gradient(circle, #0F0C29 0%, #302B63 50%, #24243E 100%)
Deep Sea 15
radial
radial-gradient(circle, #16222A 0%, #3A6073 100%)
Tone Fade 19
radial
radial-gradient(circle, #232526 0%, #414345 100%)
Coral Reef 44
radial
radial-gradient(circle, #0F2027 0%, #203A43 50%, #2C5364 100%)
Cherry Blossom 5
radial
radial-gradient(circle, #1A1A2E 0%, #16213E 50%, #0F3460 100%)
Ocean Wave 36
radial
radial-gradient(circle, #16222A 0%, #3A6073 100%)
Twilight 49
radial
radial-gradient(circle, #141E30 0%, #243B55 100%)
Tone Fade 13
radial
radial-gradient(circle, #0F2027 0%, #203A43 50%, #2C5364 100%)
Mint Breeze 25
radial
radial-gradient(circle, #000000 0%, #434343 100%)
Deep Sea 47
radial
radial-gradient(circle, #1F1C2C 0%, #928DAB 100%)
Moon Glow 50
radial
radial-gradient(circle, #000000 0%, #434343 100%)
Tone Fade 37
radial
radial-gradient(circle, #200122 0%, #6F0000 100%)
Thunder Storm 8
radial
radial-gradient(circle, #0F2027 0%, #203A43 50%, #2C5364 100%)
Spring Bloom 45
radial
radial-gradient(circle, #0F0C29 0%, #302B63 50%, #24243E 100%)
Flux 25
radial