Cloud Nine Gradient: CSS Code & Colors

Q: What's the CSS code for the Cloud Nine gradient?

Use background: radial-gradient(at 24% 72%, #A6C1EE, transparent 70%), radial-gradient(at 44% 17%, #FBC2EB, transparent 70%), radial-gradient(at 82% 62%, #C471ED, transparent 70%), #FBC2EB;. RGBA and HSLA versions are also available on this page.

Cloud Nine Gradient

Soft pastel blue, pink, and lavender mesh blobs glowing from a matching pale blue base.

Customize this gradient →

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

Color Stops

#A6C1EE

#FBC2EB

#C471ED

Background
#FBC2EB

Cloud Nine CSS Code

background: #FBC2EB;
background: radial-gradient(at 24% 72%, #A6C1EE, transparent 70%), radial-gradient(at 44% 17%, #FBC2EB, transparent 70%), radial-gradient(at 82% 62%, #C471ED, transparent 70%), #FBC2EB;

background: rgba(251, 194, 235, 1.0);
background: radial-gradient(at 24% 72%, rgba(166, 193, 238, 1.0), transparent 70%), radial-gradient(at 44% 17%, rgba(251, 194, 235, 1.0), transparent 70%), radial-gradient(at 82% 62%, rgba(196, 113, 237, 1.0), transparent 70%), rgba(251, 194, 235, 1.0);

background: hsla(317, 88%, 87%, 1.0);
background: radial-gradient(at 24% 72%, hsla(218, 68%, 79%, 1.0), transparent 70%), radial-gradient(at 44% 17%, hsla(317, 88%, 87%, 1.0), transparent 70%), radial-gradient(at 82% 62%, hsla(280, 78%, 69%, 1.0), transparent 70%), hsla(317, 88%, 87%, 1.0);

background: #FBC2EB;
background: radial-gradient(at 24% 72%, #A6C1EE, transparent 70%), radial-gradient(at 44% 17%, #FBC2EB, transparent 70%), radial-gradient(at 82% 62%, #C471ED, transparent 70%), #FBC2EB;
background: radial-gradient(at 24% 72% in oklch, oklch(80.65% 0.0705 260.56), transparent 70%), radial-gradient(at 44% 17% in oklch, oklch(87.7% 0.0835 336.72), transparent 70%), radial-gradient(at 82% 62% in oklch, oklch(68.92% 0.1909 313.35), transparent 70%), oklch(87.7% 0.0835 336.72);

The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →

bg-[image:radial-gradient(at_24%_72%,#A6C1EE,transparent_70%),radial-gradient(at_44%_17%,#FBC2EB,transparent_70%),radial-gradient(at_82%_62%,#C471ED,transparent_70%)] bg-[#FBC2EB]

bg-[image:radial-gradient(at_24%_72%,#A6C1EE,transparent_70%),radial-gradient(at_44%_17%,#FBC2EB,transparent_70%),radial-gradient(at_82%_62%,#C471ED,transparent_70%)] bg-[#FBC2EB]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Cloud Nine gradient?