Moonlit Pond Gradient: CSS Code & Colors

Q: What's the CSS code for the Moonlit Pond gradient?

Use background: radial-gradient(at center top, #C9D6E3 0%, #4B6584 50%, #1B2838 100%);. RGBA and HSLA versions are also available on this page.

Moonlit Pond Gradient

Cool silver-blue sinking into deep midnight.

Customize this gradient →

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

Color Stops

#C9D6E3

#4B6584

#1B2838

Moonlit Pond CSS Code

background: #C9D6E3;
background: radial-gradient(at center top, #C9D6E3 0%, #4B6584 50%, #1B2838 100%);

background: rgba(201, 214, 227, 1.0);
background: radial-gradient(at center top, rgba(201, 214, 227, 1.0) 0%, rgba(75, 101, 132, 1.0) 50%, rgba(27, 40, 56, 1.0) 100%);

background: hsla(210, 32%, 84%, 1.0);
background: radial-gradient(at center top, hsla(210, 32%, 84%, 1.0) 0%, hsla(213, 28%, 41%, 1.0) 50%, hsla(213, 35%, 16%, 1.0) 100%);

background: #C9D6E3;
background: radial-gradient(at center top, #C9D6E3 0%, #4B6584 50%, #1B2838 100%);
background: radial-gradient(at center top in oklch, oklch(87.02% 0.0229 248.09) 0%, oklch(49.9% 0.0587 253.27) 50%, oklch(27.28% 0.0349 254.06) 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_top_in_srgb] from-[#C9D6E3] from-0% via-[#4B6584] via-50% to-[#1B2838] to-100%

bg-[radial-gradient(at_center_top,#C9D6E3_0%,#4B6584_50%,#1B2838_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Moonlit Pond gradient?