Peony Bloom Gradient: CSS Code & Colors

Q: What's the CSS code for the Peony Bloom gradient?

Use background: radial-gradient(at center, #FFF0F5 0%, #FFB6C1 50%, #C71585 100%);. RGBA and HSLA versions are also available on this page.

Peony Bloom Gradient

Soft blush center opening into rich magenta.

Customize this gradient →

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

Color Stops

#FFF0F5

#FFB6C1

#C71585

Peony Bloom CSS Code

background: #FFF0F5;
background: radial-gradient(at center, #FFF0F5 0%, #FFB6C1 50%, #C71585 100%);

background: rgba(255, 240, 245, 1.0);
background: radial-gradient(at center, rgba(255, 240, 245, 1.0) 0%, rgba(255, 182, 193, 1.0) 50%, rgba(199, 21, 133, 1.0) 100%);

background: hsla(340, 100%, 97%, 1.0);
background: radial-gradient(at center, hsla(340, 100%, 97%, 1.0) 0%, hsla(351, 100%, 86%, 1.0) 50%, hsla(322, 81%, 43%, 1.0) 100%);

background: #FFF0F5;
background: radial-gradient(at center, #FFF0F5 0%, #FFB6C1 50%, #C71585 100%);
background: radial-gradient(at center in oklch, oklch(96.83% 0.0174 355.1) 0%, oklch(84.74% 0.0858 9.09) 50%, oklch(55.34% 0.2217 349.69) 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-radial-[at_center_in_srgb] from-[#FFF0F5] from-0% via-[#FFB6C1] via-50% to-[#C71585] to-100%

bg-[radial-gradient(at_center,#FFF0F5_0%,#FFB6C1_50%,#C71585_100%)]

Similar Gradients

More Gradient Presets

FAQ

What is the Peony Bloom gradient?