How do I write a green gradient in CSS?

Use linear-gradient() with two or more green hex stops, for example background: linear-gradient(135deg, #1F5C3A 0%, #7FB069 100%);. Add a third midpoint stop for a softer transition.

Which green gradient works best as a website background?

Sage-to-linen and mint-frost gradients work best for full-page backgrounds because they keep text contrast achievable. Forest-to-emerald is stronger for hero sections behind white headlines.

Can I use a green gradient for a button?

Yes. The Lime Pulse preset (linear from #A3E635 to #16A34A) gives a high-energy CTA. Keep the button height under 48px so the gradient stays legible against the surrounding canvas.

Is a radial green gradient better than a linear one?

Radial works better for spotlight cards and circular focal points; linear is the default for backgrounds and headers. The presets above include one radial — Spring Garden — to compare.

How do I match a green gradient to my brand?

Drop your brand green into the CSS gradient generator, then pick a lighter tint of the same hue for the second stop. Stay within ±20° on the HSL hue wheel to keep the gradient on-brand.

Gradient library · Green

Green gradient CSS — sage, forest, emerald.

Ten green gradients tuned for backgrounds, hero sections, cards, and brand surfaces. Each preset ships with the CSS, the hex stops, and the use it was built for — copy a line and move on.

Forest Atelier · #0F2F1F → #1F5C3A → #7FB069

The hex codes.

Five anchor colors that show up across every preset in this library. Copy any one to use it directly.

Anchor dark
Forest
#0F2F1F
Mid dark
Pine
#1F5C3A
Mid light
Sage Leaf
#7FB069
Accent
Lime Pulse
#A3E635
Tint
Linen Mint
#E8EFE3

The preset library.

Copy the CSS in one tap, or open any preset in the generator to adjust angle, stops, and type.

Forest Atelier
Hero background · linear · 135°
- #0F2F1F· 0%
- #1F5C3A· 55%
- #7FB069· 100%
```
background: linear-gradient(135deg, #0F2F1F 0%, #1F5C3A 55%, #7FB069 100%);
```
Open in gradient generator →
Sage Linen
Surface tile · linear · 180°
- #E8EFE3· 0%
- #A8C09A· 100%
```
background: linear-gradient(180deg, #E8EFE3 0%, #A8C09A 100%);
```
Open in gradient generator →
Emerald Studio
Card accent · linear · 120°
- #064E3B· 0%
- #10B981· 100%
```
background: linear-gradient(120deg, #064E3B 0%, #10B981 100%);
```
Open in gradient generator →
Mint Frost
Light hero · linear · 90°
- #F0FDF4· 0%
- #86EFAC· 100%
```
background: linear-gradient(90deg, #F0FDF4 0%, #86EFAC 100%);
```
Open in gradient generator →
Lime Pulse
CTA button · linear · 90°
- #A3E635· 0%
- #16A34A· 100%
```
background: linear-gradient(90deg, #A3E635 0%, #16A34A 100%);
```
Open in gradient generator →
Olive Field
Editorial panel · linear · 160°
- #3F5A3A· 0%
- #8B9D77· 100%
```
background: linear-gradient(160deg, #3F5A3A 0%, #8B9D77 100%);
```
Open in gradient generator →
Teal Moss
Dashboard surface · linear · 135°
- #134E4A· 0%
- #5EEAD4· 100%
```
background: linear-gradient(135deg, #134E4A 0%, #5EEAD4 100%);
```
Open in gradient generator →
Spring Garden
Spotlight card · radial
- #F8FAF5· 0%
- #7FB069· 60%
- #1F5C3A· 100%
```
background: radial-gradient(circle at center, #F8FAF5 0%, #7FB069 60%, #1F5C3A 100%);
```
Open in gradient generator →
Eucalyptus
Hero overlay · linear · 200°
- #CFE2D4· 0%
- #5E8B73· 100%
```
background: linear-gradient(200deg, #CFE2D4 0%, #5E8B73 100%);
```
Open in gradient generator →
Botanical Wheel
Decorative ring · conic · 0°
- #1F5C3A· 0%
- #A3E635· 33%
- #10B981· 66%
- #1F5C3A· 100%
```
background: conic-gradient(from 0deg at center, #1F5C3A 0%, #A3E635 33%, #10B981 66%, #1F5C3A 100%);
```
Open in gradient generator →

Greens

How to use this gradient family.

What makes a green gradient feel calm — or alive.

Green sits between blue and yellow on the visible spectrum, and a green gradient inherits both registers depending on its midpoint. Stops in the 130°–160° hue range read as botanical and calm — sage, eucalyptus, moss. Stops below 110° lean toward lime and yellow-green and read as energetic. A gradient that crosses from forest (#0F2F1F) to lime (#A3E635) is the loudest green move you can make; a sage-to-linen gradient is the quietest. Pick the temperature first, then the contrast.

Where green gradients earn their place.

Wellness, finance, sustainability, and outdoor brands lean on green because it reads as stability without coldness. A dark forest-to-emerald hero suggests competence and growth at once; a mint frost gradient softens long-form reading surfaces; a lime pulse on a CTA earns the click without screaming. Avoid green gradients for medical alerts or anything time-critical — green is the universal go signal, and using it for stop conditions confuses users.

Building accessible text on a green gradient.

Test every text color against the darkest stop of your gradient, not the average. White text passes WCAG AA on forest, emerald, and olive stops; black text only works on mint, sage, and lime. If the gradient crosses both light and dark regions, anchor text to the dark third and pull the light third to the bottom of the layout where it does not carry copy.

How to use the greens gradient library.

Step 1
Pick a preset
Choose the green preset that matches the surface you are designing — hero, card, button, or accent.
Step 2
Copy the CSS
Use the copy button on each card to grab the full CSS background declaration.
Step 3
Tune in the generator
Open the preset in the gradient generator to adjust angle, stops, or the gradient type before shipping.

Frequently asked questions.

How do I write a green gradient in CSS?: Use linear-gradient() with two or more green hex stops, for example background: linear-gradient(135deg, #1F5C3A 0%, #7FB069 100%);. Add a third midpoint stop for a softer transition.
Which green gradient works best as a website background?: Sage-to-linen and mint-frost gradients work best for full-page backgrounds because they keep text contrast achievable. Forest-to-emerald is stronger for hero sections behind white headlines.
Can I use a green gradient for a button?: Yes. The Lime Pulse preset (linear from #A3E635 to #16A34A) gives a high-energy CTA. Keep the button height under 48px so the gradient stays legible against the surrounding canvas.
Is a radial green gradient better than a linear one?: Radial works better for spotlight cards and circular focal points; linear is the default for backgrounds and headers. The presets above include one radial — Spring Garden — to compare.
How do I match a green gradient to my brand?: Drop your brand green into the CSS gradient generator, then pick a lighter tint of the same hue for the second stop. Stay within ±20° on the HSL hue wheel to keep the gradient on-brand.