radial-gradient(circle, #1A1A2E 0%, #16213E 50%, #0F3460 100%)
Midnight 46
radial
Back to gradients
#1A1A2E
Light
#E94560
Dark
CSS Code
Spectrum 26
RADIAL
CIRCLE
3,345
Views
Copy & Download
About this gradient
This is a radial CSS gradient that blends two colours. The colour transitions outward from the centre in smooth concentric rings, moving from Dark Blue #1A1A2E at the start to Red #E94560 at the end. Because it spans a warm and a cool tone, the transition feels dynamic and eye-catching.
The colours
The gradient is built from Dark Blue (#1A1A2E), Red (#E94560). Dark Blue is a deep, low-lightness tone — strong for text, headings and bold accents. Red is a vivid, saturated tone that draws the eye — best for accents and highlights.
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 Red end.
Frequently asked questions
How do I use this gradient in CSS?
Copy the radial-gradient(circle, #1A1A2E 0%, #E94560 100%) value and apply it to any element with the background property, for example: background: radial-gradient(circle, #1A1A2E 0%, #E94560 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 (#1A1A2E and #E94560) 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