Rose Quartz Glow Gradient: CSS Code & Colors

Q: What's the CSS code for the Rose Quartz Glow gradient?

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

Rose Quartz Glow Gradient

Soft pink glow deepening into dusty rose.

Customize this gradient →

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

Color Stops

#FFF0F0

#F7CAC9

#D96C7C

Rose Quartz Glow CSS Code

background: #FFF0F0;
background: radial-gradient(at center, #FFF0F0 0%, #F7CAC9 50%, #D96C7C 100%);

background: rgba(255, 240, 240, 1.0);
background: radial-gradient(at center, rgba(255, 240, 240, 1.0) 0%, rgba(247, 202, 201, 1.0) 50%, rgba(217, 108, 124, 1.0) 100%);

background: hsla(0, 100%, 97%, 1.0);
background: radial-gradient(at center, hsla(0, 100%, 97%, 1.0) 0%, hsla(1, 74%, 88%, 1.0) 50%, hsla(351, 59%, 64%, 1.0) 100%);

background: #FFF0F0;
background: radial-gradient(at center, #FFF0F0 0%, #F7CAC9 50%, #D96C7C 100%);
background: radial-gradient(at center in oklch, oklch(96.69% 0.0162 17.44) 0%, oklch(87.77% 0.0512 19.67) 50%, oklch(66.29% 0.137 12.34) 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-[#FFF0F0] from-0% via-[#F7CAC9] via-50% to-[#D96C7C] to-100%

bg-[radial-gradient(at_center,#FFF0F0_0%,#F7CAC9_50%,#D96C7C_100%)]

Similar Gradients

More Gradient Presets

FAQ

What is the Rose Quartz Glow gradient?