Sage Dream Gradient
Layered sage and moss mesh blobs glowing from their own soft green 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
#A8D5BA
#6A9C78
#DCE9DF
#4F7B5D
#B8E0C4
#E8F3EB
Background
#B8E0C4
#B8E0C4
Sage Dream CSS Code
background: #B8E0C4; background: radial-gradient(at 82% 62%, #A8D5BA, transparent 70%), radial-gradient(at 56% 83%, #6A9C78, transparent 70%), radial-gradient(at 24% 72%, #DCE9DF, transparent 70%), radial-gradient(at 18% 38%, #4F7B5D, transparent 70%), radial-gradient(at 44% 17%, #B8E0C4, transparent 70%), radial-gradient(at 76% 28%, #E8F3EB, transparent 70%), #B8E0C4;
background: rgba(184, 224, 196, 1.0); background: radial-gradient(at 82% 62%, rgba(168, 213, 186, 1.0), transparent 70%), radial-gradient(at 56% 83%, rgba(106, 156, 120, 1.0), transparent 70%), radial-gradient(at 24% 72%, rgba(220, 233, 223, 1.0), transparent 70%), radial-gradient(at 18% 38%, rgba(79, 123, 93, 1.0), transparent 70%), radial-gradient(at 44% 17%, rgba(184, 224, 196, 1.0), transparent 70%), radial-gradient(at 76% 28%, rgba(232, 243, 235, 1.0), transparent 70%), rgba(184, 224, 196, 1.0);
background: hsla(138, 39%, 80%, 1.0); background: radial-gradient(at 82% 62%, hsla(144, 35%, 75%, 1.0), transparent 70%), radial-gradient(at 56% 83%, hsla(137, 20%, 51%, 1.0), transparent 70%), radial-gradient(at 24% 72%, hsla(134, 23%, 89%, 1.0), transparent 70%), radial-gradient(at 18% 38%, hsla(139, 22%, 40%, 1.0), transparent 70%), radial-gradient(at 44% 17%, hsla(138, 39%, 80%, 1.0), transparent 70%), radial-gradient(at 76% 28%, hsla(136, 31%, 93%, 1.0), transparent 70%), hsla(138, 39%, 80%, 1.0);
background: #B8E0C4; background: radial-gradient(at 82% 62%, #A8D5BA, transparent 70%), radial-gradient(at 56% 83%, #6A9C78, transparent 70%), radial-gradient(at 24% 72%, #DCE9DF, transparent 70%), radial-gradient(at 18% 38%, #4F7B5D, transparent 70%), radial-gradient(at 44% 17%, #B8E0C4, transparent 70%), radial-gradient(at 76% 28%, #E8F3EB, transparent 70%), #B8E0C4; background: radial-gradient(at 82% 62% in oklch, oklch(83.36% 0.0603 158.45), transparent 70%), radial-gradient(at 56% 83% in oklch, oklch(64.7% 0.076 152.67), transparent 70%), radial-gradient(at 24% 72% in oklch, oklch(92.15% 0.0192 152.8), transparent 70%), radial-gradient(at 18% 38% in oklch, oklch(54.19% 0.0678 153.82), transparent 70%), radial-gradient(at 44% 17% in oklch, oklch(87.04% 0.0568 154.56), transparent 70%), radial-gradient(at 76% 28% in oklch, oklch(95.37% 0.0157 154.47), transparent 70%), oklch(87.04% 0.0568 154.56);
The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →
bg-[image:radial-gradient(at_82%_62%,#A8D5BA,transparent_70%),radial-gradient(at_56%_83%,#6A9C78,transparent_70%),radial-gradient(at_24%_72%,#DCE9DF,transparent_70%),radial-gradient(at_18%_38%,#4F7B5D,transparent_70%),radial-gradient(at_44%_17%,#B8E0C4,transparent_70%),radial-gradient(at_76%_28%,#E8F3EB,transparent_70%)] bg-[#B8E0C4]
bg-[image:radial-gradient(at_82%_62%,#A8D5BA,transparent_70%),radial-gradient(at_56%_83%,#6A9C78,transparent_70%),radial-gradient(at_24%_72%,#DCE9DF,transparent_70%),radial-gradient(at_18%_38%,#4F7B5D,transparent_70%),radial-gradient(at_44%_17%,#B8E0C4,transparent_70%),radial-gradient(at_76%_28%,#E8F3EB,transparent_70%)] bg-[#B8E0C4]
Try it as
Similar Gradients
More Gradient Presets
FAQ
What is the Sage Dream gradient?
Layered sage and moss mesh blobs glowing from their own soft green base.
What's the CSS code for the Sage Dream gradient?
Use background: radial-gradient(at 82% 62%, #A8D5BA, transparent 70%), radial-gradient(at 56% 83%, #6A9C78, transparent 70%), radial-gradient(at 24% 72%, #DCE9DF, transparent 70%), radial-gradient(at 18% 38%, #4F7B5D, transparent 70%), radial-gradient(at 44% 17%, #B8E0C4, transparent 70%), radial-gradient(at 76% 28%, #E8F3EB, transparent 70%), #B8E0C4;. RGBA and HSLA versions are also available on this page.