Iridescent Pearl Gradient: CSS Code & Colors

Q: What's the CSS code for the Iridescent Pearl gradient?

Use background: conic-gradient(from 315deg, #FBC2EB 0%, #A6C1EE 25%, #FDCBF1 50%, #E6DEE9 75%, #FBC2EB 100%);. RGBA and HSLA versions are also available on this page.

Iridescent Pearl Gradient

Conic sweep of soft pastel pinks and lavenders.

Customize this gradient →

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

Color Stops

#FBC2EB

#A6C1EE

#FDCBF1

#E6DEE9

#FBC2EB

Iridescent Pearl CSS Code

background: #FBC2EB;
background: conic-gradient(from 315deg, #FBC2EB 0%, #A6C1EE 25%, #FDCBF1 50%, #E6DEE9 75%, #FBC2EB 100%);

background: rgba(251, 194, 235, 1.0);
background: conic-gradient(from 315deg, rgba(251, 194, 235, 1.0) 0%, rgba(166, 193, 238, 1.0) 25%, rgba(253, 203, 241, 1.0) 50%, rgba(230, 222, 233, 1.0) 75%, rgba(251, 194, 235, 1.0) 100%);

background: hsla(317, 88%, 87%, 1.0);
background: conic-gradient(from 315deg, hsla(317, 88%, 87%, 1.0) 0%, hsla(218, 68%, 79%, 1.0) 25%, hsla(314, 93%, 89%, 1.0) 50%, hsla(284, 20%, 89%, 1.0) 75%, hsla(317, 88%, 87%, 1.0) 100%);

background: #FBC2EB;
background: conic-gradient(from 315deg, #FBC2EB 0%, #A6C1EE 25%, #FDCBF1 50%, #E6DEE9 75%, #FBC2EB 100%);
background: conic-gradient(from 315deg in oklch, oklch(87.7% 0.0835 336.72) 0%, oklch(80.65% 0.0705 260.56) 25%, oklch(89.68% 0.0746 334.8) 50%, oklch(91.01% 0.0171 316.93) 75%, oklch(87.7% 0.0835 336.72) 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_315deg,#FBC2EB_0%,#A6C1EE_25%,#FDCBF1_50%,#E6DEE9_75%,#FBC2EB_100%)]

bg-[conic-gradient(from_315deg,#FBC2EB_0%,#A6C1EE_25%,#FDCBF1_50%,#E6DEE9_75%,#FBC2EB_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Iridescent Pearl gradient?