Sakura Mist Gradient: CSS Code & Colors

Q: What's the CSS code for the Sakura Mist gradient?

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

Sakura Mist Gradient

Pale blossom pink softening outward.

Customize this gradient →

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

Color Stops

#FFEFF5

#FFC1D9

#F48FB1

Sakura Mist CSS Code

background: #FFEFF5;
background: radial-gradient(at right center, #FFEFF5 0%, #FFC1D9 50%, #F48FB1 100%);

background: rgba(255, 239, 245, 1.0);
background: radial-gradient(at right center, rgba(255, 239, 245, 1.0) 0%, rgba(255, 193, 217, 1.0) 50%, rgba(244, 143, 177, 1.0) 100%);

background: hsla(338, 100%, 97%, 1.0);
background: radial-gradient(at right center, hsla(338, 100%, 97%, 1.0) 0%, hsla(337, 100%, 88%, 1.0) 50%, hsla(340, 82%, 76%, 1.0) 100%);

background: #FFEFF5;
background: radial-gradient(at right center, #FFEFF5 0%, #FFC1D9 50%, #F48FB1 100%);
background: radial-gradient(at right center in oklch, oklch(96.64% 0.0189 352.64) 0%, oklch(87.35% 0.0769 353.75) 50%, oklch(76.57% 0.1276 358.96) 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_right_center_in_srgb] from-[#FFEFF5] from-0% via-[#FFC1D9] via-50% to-[#F48FB1] to-100%

bg-[radial-gradient(at_right_center,#FFEFF5_0%,#FFC1D9_50%,#F48FB1_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Sakura Mist gradient?