Deep Forest Mist Gradient: CSS Code & Colors

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

Use background: radial-gradient(at 50% 86%, #52B788, transparent 70%), radial-gradient(at 14% 50%, #2D6A4F, transparent 70%), radial-gradient(at 50% 14%, #B7E4C7, transparent 70%), radial-gradient(at 86% 50%, #1B4332, transparent 70%), #B7E4C7;. RGBA and HSLA versions are also available on this page.

Deep Forest Mist Gradient

Sage and emerald mesh blobs deepening into moss, glowing from their own forest base.

Customize this gradient →

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

Color Stops

#52B788

#2D6A4F

#B7E4C7

#1B4332

Background
#B7E4C7

Deep Forest Mist CSS Code

background: #B7E4C7;
background: radial-gradient(at 50% 86%, #52B788, transparent 70%), radial-gradient(at 14% 50%, #2D6A4F, transparent 70%), radial-gradient(at 50% 14%, #B7E4C7, transparent 70%), radial-gradient(at 86% 50%, #1B4332, transparent 70%), #B7E4C7;

background: rgba(183, 228, 199, 1.0);
background: radial-gradient(at 50% 86%, rgba(82, 183, 136, 1.0), transparent 70%), radial-gradient(at 14% 50%, rgba(45, 106, 79, 1.0), transparent 70%), radial-gradient(at 50% 14%, rgba(183, 228, 199, 1.0), transparent 70%), radial-gradient(at 86% 50%, rgba(27, 67, 50, 1.0), transparent 70%), rgba(183, 228, 199, 1.0);

background: hsla(141, 45%, 81%, 1.0);
background: radial-gradient(at 50% 86%, hsla(152, 41%, 52%, 1.0), transparent 70%), radial-gradient(at 14% 50%, hsla(153, 40%, 30%, 1.0), transparent 70%), radial-gradient(at 50% 14%, hsla(141, 45%, 81%, 1.0), transparent 70%), radial-gradient(at 86% 50%, hsla(155, 43%, 18%, 1.0), transparent 70%), hsla(141, 45%, 81%, 1.0);

background: #B7E4C7;
background: radial-gradient(at 50% 86%, #52B788, transparent 70%), radial-gradient(at 14% 50%, #2D6A4F, transparent 70%), radial-gradient(at 50% 14%, #B7E4C7, transparent 70%), radial-gradient(at 86% 50%, #1B4332, transparent 70%), #B7E4C7;
background: radial-gradient(at 50% 86% in oklch, oklch(70.64% 0.1182 160.89), transparent 70%), radial-gradient(at 14% 50% in oklch, oklch(47.58% 0.0777 162.16), transparent 70%), radial-gradient(at 50% 14% in oklch, oklch(87.92% 0.0614 156.65), transparent 70%), radial-gradient(at 86% 50% in oklch, oklch(34.84% 0.0547 163.36), transparent 70%), oklch(87.92% 0.0614 156.65);

The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →

bg-[image:radial-gradient(at_50%_86%,#52B788,transparent_70%),radial-gradient(at_14%_50%,#2D6A4F,transparent_70%),radial-gradient(at_50%_14%,#B7E4C7,transparent_70%),radial-gradient(at_86%_50%,#1B4332,transparent_70%)] bg-[#B7E4C7]

bg-[image:radial-gradient(at_50%_86%,#52B788,transparent_70%),radial-gradient(at_14%_50%,#2D6A4F,transparent_70%),radial-gradient(at_50%_14%,#B7E4C7,transparent_70%),radial-gradient(at_86%_50%,#1B4332,transparent_70%)] bg-[#B7E4C7]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Deep Forest Mist gradient?