Gradient stops
Mint
#A7F3D0 0% Emerald
#10B981 52% Forest
#065F46 100% CSS gradient
Green Gradient
A green gradient moving from light mint through emerald to deep forest green.
A fresh cool-green gradient that works as a decorative surface or data-adjacent accent.
Green gradients can feel fresh and digital with mint/emerald stops or natural and restrained with muted botanical values.
CSS
.example {
background: linear-gradient(135deg, #A7F3D0 0%, #10B981 52%, #065F46 100%);
}Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.
Angle previews
90°
135°
180°
Ready-to-use variations
Mint emerald
Clean digital green progression.
linear-gradient(135deg, #D1FAE5 0%, #10B981 50%, #065F46 100%) Botanical
Muted natural alternative.
linear-gradient(150deg, #DDE5D2 0%, #8FA27A 50%, #3F5A3C 100%) Green cyan
Fresh transition toward cyan.
linear-gradient(120deg, #86EFAC 0%, #22C55E 50%, #06B6D4 100%) Tuning tips
- Do not use green alone as the only success signal.
- Muted greens often need more lightness separation than saturated greens.
- Test text on every stop region, not just the center.
Related gradients
Rainbow Gradient
A six-stop rainbow gradient moving through red, orange, yellow, green, blue, and violet.
Black Gradient
A restrained dark gradient from near-black navy through charcoal to soft black.
Blue Gradient
A three-stop blue gradient from pale sky blue through vivid blue to deep navy.
Blue Purple Gradient
A blue-to-purple gradient moving from saturated blue through indigo to violet.