Frost Vortex Gradient: CSS Code & Colors

Q: What's the CSS code for the Frost Vortex gradient?

Use background: conic-gradient(from 135deg, #F0F8FF 0%, #A9D6E5 33%, #468FAF 67%, #F0F8FF 100%);. RGBA and HSLA versions are also available on this page.

Frost Vortex Gradient

Conic sweep of pale frost into deep steel blue.

Customize this gradient →

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

Color Stops

#F0F8FF

#A9D6E5

#468FAF

#F0F8FF

Frost Vortex CSS Code

background: #F0F8FF;
background: conic-gradient(from 135deg, #F0F8FF 0%, #A9D6E5 33%, #468FAF 67%, #F0F8FF 100%);

background: rgba(240, 248, 255, 1.0);
background: conic-gradient(from 135deg, rgba(240, 248, 255, 1.0) 0%, rgba(169, 214, 229, 1.0) 33%, rgba(70, 143, 175, 1.0) 67%, rgba(240, 248, 255, 1.0) 100%);

background: hsla(208, 100%, 97%, 1.0);
background: conic-gradient(from 135deg, hsla(208, 100%, 97%, 1.0) 0%, hsla(195, 54%, 78%, 1.0) 33%, hsla(198, 43%, 48%, 1.0) 67%, hsla(208, 100%, 97%, 1.0) 100%);

background: #F0F8FF;
background: conic-gradient(from 135deg, #F0F8FF 0%, #A9D6E5 33%, #468FAF 67%, #F0F8FF 100%);
background: conic-gradient(from 135deg in oklch, oklch(97.51% 0.0127 244.25) 0%, oklch(84.92% 0.0514 220.2) 33%, oklch(61.63% 0.0872 229.16) 67%, oklch(97.51% 0.0127 244.25) 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_135deg,#F0F8FF_0%,#A9D6E5_33%,#468FAF_67%,#F0F8FF_100%)]

bg-[conic-gradient(from_135deg,#F0F8FF_0%,#A9D6E5_33%,#468FAF_67%,#F0F8FF_100%)]

Similar Gradients

More Gradient Presets

FAQ

What is the Frost Vortex gradient?