Polar Lights Gradient: CSS Code & Colors

Q: What's the CSS code for the Polar Lights gradient?

Use background: radial-gradient(at 81% 68%, #00C9FF, transparent 70%), radial-gradient(at 19% 32%, #7209B7, transparent 70%), #0B1120;. RGBA and HSLA versions are also available on this page.

Polar Lights Gradient

Cyan and violet mesh blobs glowing over a deep midnight base.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#00C9FF

#7209B7

Background
#0B1120

Polar Lights CSS Code

background: #0B1120;
background: radial-gradient(at 81% 68%, #00C9FF, transparent 70%), radial-gradient(at 19% 32%, #7209B7, transparent 70%), #0B1120;

background: rgba(11, 17, 32, 1.0);
background: radial-gradient(at 81% 68%, rgba(0, 201, 255, 1.0), transparent 70%), radial-gradient(at 19% 32%, rgba(114, 9, 183, 1.0), transparent 70%), rgba(11, 17, 32, 1.0);

background: hsla(223, 49%, 8%, 1.0);
background: radial-gradient(at 81% 68%, hsla(193, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 19% 32%, hsla(276, 91%, 38%, 1.0), transparent 70%), hsla(223, 49%, 8%, 1.0);

background: #0B1120;
background: radial-gradient(at 81% 68%, #00C9FF, transparent 70%), radial-gradient(at 19% 32%, #7209B7, transparent 70%), #0B1120;
background: radial-gradient(at 81% 68% in oklch, oklch(77.86% 0.1489 226.02), transparent 70%), radial-gradient(at 19% 32% in oklch, oklch(44.68% 0.2282 304.02), transparent 70%), oklch(18.02% 0.0325 266.62);

The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →

bg-[image:radial-gradient(at_81%_68%,#00C9FF,transparent_70%),radial-gradient(at_19%_32%,#7209B7,transparent_70%)] bg-[#0B1120]

bg-[image:radial-gradient(at_81%_68%,#00C9FF,transparent_70%),radial-gradient(at_19%_32%,#7209B7,transparent_70%)] bg-[#0B1120]

Similar Gradients

More Gradient Presets

FAQ

What is the Polar Lights gradient?