Arctic Aurora Gradient: CSS Code & Colors

Q: What's the CSS code for the Arctic Aurora gradient?

Use background: linear-gradient(0deg, #83A4D4 0%, #B6FBFF 30%, #92FE9D 65%, #00C9FF 100%);. RGBA and HSLA versions are also available on this page.

Arctic Aurora Gradient

Icy blue shifting through mint into electric cyan.

Customize this gradient →

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

Color Stops

#83A4D4

#B6FBFF

#92FE9D

#00C9FF

Arctic Aurora CSS Code

background: #83A4D4;
background: linear-gradient(0deg, #83A4D4 0%, #B6FBFF 30%, #92FE9D 65%, #00C9FF 100%);

background: rgba(131, 164, 212, 1.0);
background: linear-gradient(0deg, rgba(131, 164, 212, 1.0) 0%, rgba(182, 251, 255, 1.0) 30%, rgba(146, 254, 157, 1.0) 65%, rgba(0, 201, 255, 1.0) 100%);

background: hsla(216, 49%, 67%, 1.0);
background: linear-gradient(0deg, hsla(216, 49%, 67%, 1.0) 0%, hsla(183, 100%, 86%, 1.0) 30%, hsla(126, 98%, 78%, 1.0) 65%, hsla(193, 100%, 50%, 1.0) 100%);

background: #83A4D4;
background: linear-gradient(0deg, #83A4D4 0%, #B6FBFF 30%, #92FE9D 65%, #00C9FF 100%);
background: linear-gradient(0deg in oklch, oklch(71.21% 0.0796 257.67) 0%, oklch(94.38% 0.0685 200.58) 30%, oklch(90.86% 0.1652 146.32) 65%, oklch(77.86% 0.1489 226.02) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-linear-[0deg,#83A4D4_0%,#B6FBFF_30%,#92FE9D_65%,#00C9FF_100%]

bg-[linear-gradient(0deg,#83A4D4_0%,#B6FBFF_30%,#92FE9D_65%,#00C9FF_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Arctic Aurora gradient?