Arctic Swirl Gradient

Conic sweep of pale ice blue into deep sapphire.
Open in the gradient generator →

Color Stops

#E3F2FD
#90CAF9
#1565C0
#E3F2FD

Arctic Swirl CSS Code

HEX Copy
background: #E3F2FD;
background: conic-gradient(from 0deg, #E3F2FD 0%, #90CAF9 33%, #1565C0 67%, #E3F2FD 100%);
RGBA Copy
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%);
HSLA Copy
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%);

More Gradient Presets

FAQ

What is the Arctic Swirl gradient?

Conic sweep of pale ice blue into deep sapphire.

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.

Generate a Gradient

Start your own gradient →