Arctic Swirl Gradient: CSS Code & Colors

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

Use background: conic-gradient(from 0deg, #E3F2FD 0%, #90CAF9 33%, #1565C0 67%, #E3F2FD 100%);. RGBA and HSLA versions are also available on this page.

Arctic Swirl Gradient

Conic sweep of pale ice blue into deep sapphire.

Customize this gradient →

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

Color Stops

#E3F2FD

#90CAF9

#1565C0

#E3F2FD

Arctic Swirl CSS Code

background: #E3F2FD;
background: conic-gradient(from 0deg, #E3F2FD 0%, #90CAF9 33%, #1565C0 67%, #E3F2FD 100%);

background: rgba(227, 242, 253, 1.0);
background: conic-gradient(from 0deg, rgba(227, 242, 253, 1.0) 0%, rgba(144, 202, 249, 1.0) 33%, rgba(21, 101, 192, 1.0) 67%, rgba(227, 242, 253, 1.0) 100%);

background: hsla(205, 87%, 94%, 1.0);
background: conic-gradient(from 0deg, hsla(205, 87%, 94%, 1.0) 0%, hsla(207, 90%, 77%, 1.0) 33%, hsla(212, 80%, 42%, 1.0) 67%, hsla(205, 87%, 94%, 1.0) 100%);

background: #E3F2FD;
background: conic-gradient(from 0deg, #E3F2FD 0%, #90CAF9 33%, #1565C0 67%, #E3F2FD 100%);
background: conic-gradient(from 0deg in oklch, oklch(95.32% 0.0218 239.43) 0%, oklch(81.63% 0.0896 243.62) 33%, oklch(51.34% 0.1603 255.67) 67%, oklch(95.32% 0.0218 239.43) 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-[conic-gradient(from_0deg,#E3F2FD_0%,#90CAF9_33%,#1565C0_67%,#E3F2FD_100%)]

bg-[conic-gradient(from_0deg,#E3F2FD_0%,#90CAF9_33%,#1565C0_67%,#E3F2FD_100%)]

Similar Gradients

More Gradient Presets

FAQ

What is the Arctic Swirl gradient?