Cotton Clouds Gradient: CSS Code & Colors

Q: What's the CSS code for the Cotton Clouds gradient?

Use background: linear-gradient(0deg, #E0EAFC 0%, #CFDEF3 100%);. RGBA and HSLA versions are also available on this page.

Cotton Clouds Gradient

Very light, airy blue-white gradient.

Customize this gradient →

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

Color Stops

#E0EAFC

#CFDEF3

Cotton Clouds CSS Code

background: #E0EAFC;
background: linear-gradient(0deg, #E0EAFC 0%, #CFDEF3 100%);

background: rgba(224, 234, 252, 1.0);
background: linear-gradient(0deg, rgba(224, 234, 252, 1.0) 0%, rgba(207, 222, 243, 1.0) 100%);

background: hsla(219, 82%, 93%, 1.0);
background: linear-gradient(0deg, hsla(219, 82%, 93%, 1.0) 0%, hsla(215, 60%, 88%, 1.0) 100%);

background: #E0EAFC;
background: linear-gradient(0deg, #E0EAFC 0%, #CFDEF3 100%);
background: linear-gradient(0deg in oklch, oklch(93.49% 0.0267 262.34) 0%, oklch(89.58% 0.0331 256.77) 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-0/srgb from-[#E0EAFC] from-0% to-[#CFDEF3] to-100%

bg-gradient-to-t from-[#E0EAFC] from-0% to-[#CFDEF3] to-100%

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Cotton Clouds gradient?