Cool Sky Gradient: CSS Code & Colors

Q: What's the CSS code for the Cool Sky gradient?

Use background: linear-gradient(0deg, #2980B9 0%, #6DD5FA 50%, #FFFFFF 100%);. RGBA and HSLA versions are also available on this page.

Cool Sky Gradient

Three-stop blue sky, deep to pale to white.

Customize this gradient →

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

Color Stops

#2980B9

#6DD5FA

#FFFFFF

Cool Sky CSS Code

background: #2980B9;
background: linear-gradient(0deg, #2980B9 0%, #6DD5FA 50%, #FFFFFF 100%);

background: rgba(41, 128, 185, 1.0);
background: linear-gradient(0deg, rgba(41, 128, 185, 1.0) 0%, rgba(109, 213, 250, 1.0) 50%, rgba(255, 255, 255, 1.0) 100%);

background: hsla(204, 64%, 44%, 1.0);
background: linear-gradient(0deg, hsla(204, 64%, 44%, 1.0) 0%, hsla(196, 93%, 70%, 1.0) 50%, hsla(0, 0%, 100%, 1.0) 100%);

background: #2980B9;
background: linear-gradient(0deg, #2980B9 0%, #6DD5FA 50%, #FFFFFF 100%);
background: linear-gradient(0deg in oklch, oklch(57.59% 0.119 242.28) 0%, oklch(82.46% 0.1094 223.86) 50%, oklch(100% 0 none) 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-[#2980B9] from-0% via-[#6DD5FA] via-50% to-[#FFFFFF] to-100%

bg-gradient-to-t from-[#2980B9] from-0% via-[#6DD5FA] via-50% to-[#FFFFFF] to-100%

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Cool Sky gradient?