radial-gradient(circle, #1A1A2E 0%, #16213E 50%, #0F3460 100%)
Midnight 46
radial
Back to gradients
#1F1C2C
Light
#928DAB
Dark
CSS Code
Purple Rain 10
RADIAL
CIRCLE
3,524
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 Violet #1F1C2C at the start to Muted Blue #928DAB 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 Violet (#1F1C2C), Muted Blue (#928DAB). Dark Violet is a deep, low-lightness tone — strong for text, headings and bold accents. Muted Blue is a soft, muted tone that suits calm backgrounds and large surfaces.
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 two colours have strong contrast against each other, but always check text placed on top of the gradient — dark text reads best over the lighter end and light text over the darker end. Aim for a contrast ratio of at least 4.5:1 for body text.
Frequently asked questions
How do I use this gradient in CSS?
Copy the radial-gradient(circle, #1F1C2C 0%, #928DAB 100%) value and apply it to any element with the background property, for example: background: radial-gradient(circle, #1F1C2C 0%, #928DAB 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 (#1F1C2C and #928DAB) 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