Rainbow Sherbet Gradient: CSS Code & Colors

Q: What's the CSS code for the Rainbow Sherbet gradient?

Use background: conic-gradient(from 0deg, #FFB3BA 0%, #FFFFBA 25%, #BAFFC9 50%, #BAE1FF 75%, #FFB3BA 100%);. RGBA and HSLA versions are also available on this page.

Rainbow Sherbet Gradient

Conic sweep of playful pastel primary colors.

Customize this gradient →

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

Color Stops

#FFB3BA

#FFFFBA

#BAFFC9

#BAE1FF

#FFB3BA

Rainbow Sherbet CSS Code

background: #FFB3BA;
background: conic-gradient(from 0deg, #FFB3BA 0%, #FFFFBA 25%, #BAFFC9 50%, #BAE1FF 75%, #FFB3BA 100%);

background: rgba(255, 179, 186, 1.0);
background: conic-gradient(from 0deg, rgba(255, 179, 186, 1.0) 0%, rgba(255, 255, 186, 1.0) 25%, rgba(186, 255, 201, 1.0) 50%, rgba(186, 225, 255, 1.0) 75%, rgba(255, 179, 186, 1.0) 100%);

background: hsla(354, 100%, 85%, 1.0);
background: conic-gradient(from 0deg, hsla(354, 100%, 85%, 1.0) 0%, hsla(60, 100%, 86%, 1.0) 25%, hsla(133, 100%, 86%, 1.0) 50%, hsla(206, 100%, 86%, 1.0) 75%, hsla(354, 100%, 85%, 1.0) 100%);

background: #FFB3BA;
background: conic-gradient(from 0deg, #FFB3BA 0%, #FFFFBA 25%, #BAFFC9 50%, #BAE1FF 75%, #FFB3BA 100%);
background: conic-gradient(from 0deg in oklch, oklch(84.03% 0.0891 13.07) 0%, oklch(98.39% 0.0872 107.9) 25%, oklch(94.02% 0.1002 150.82) 50%, oklch(89.17% 0.0582 241.41) 75%, oklch(84.03% 0.0891 13.07) 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_0deg,#FFB3BA_0%,#FFFFBA_25%,#BAFFC9_50%,#BAE1FF_75%,#FFB3BA_100%)]

bg-[conic-gradient(from_0deg,#FFB3BA_0%,#FFFFBA_25%,#BAFFC9_50%,#BAE1FF_75%,#FFB3BA_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Rainbow Sherbet gradient?