radial-gradient(circle, #1A1A2E 0%, #16213E 50%, #0F3460 100%)
Midnight 46
radial
Back to gradients
#0F0C29
Light
#302B63
50%
#24243E
Dark
CSS Code
Sunrise 35
RADIAL
CIRCLE
3,822
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 Blue #0F0C29 at the start to Dark Blue #24243E 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 (#0F0C29), Dark Blue (#302B63), Dark Blue (#24243E). Dark Blue is a deep, low-lightness tone — strong for text, headings and bold accents. Dark Blue is a deep, low-lightness tone — strong for text, headings and bold accents.
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 Dark Blue end.
Frequently asked questions
How do I use this gradient in CSS?
Copy the radial-gradient(circle, #0F0C29 0%, #302B63 50%, #24243E 100%) value and apply it to any element with the background property, for example: background: radial-gradient(circle, #0F0C29 0%, #302B63 50%, #24243E 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 (#0F0C29 and #24243E) 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, #0F2027 0%, #203A43 50%, #2C5364 100%)
Hue Shift 35
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