Green gradient

Green signals growth, nature, money and success. Screen greens are often too neon; pulling chroma down or shifting toward teal produces gradients that look natural. Below are 12 green gradients — copy the CSS, download a PNG, or open one in the editor.

  • Aa · 3.4:1

    White text: Fails AA — large text only (3:1)

    Green two-tone

    #2f9f3d → #005e15
  • Aa · 3.1:1

    Black text: Fails AA — large text only (3:1)

    Green light to deep

    #bfecbf → #00721b
  • Aa · 4.9:1

    Black text: Passes AA

    Green analogous left

    #7e8900 → #009863
  • Aa · 5.5:1

    Black text: Passes AA

    Green analogous right

    #2f9f3d → #00b8a1
  • Aa · 12.6:1

    Black text: Passes AA

    Green pastel

    #ddefcc → #a1e1c5
  • Aa · 8.7:1

    White text: Passes AA

    Green midnight

    #052107 → #00572f
  • Aa · 5.5:1

    Black text: Passes AA

    Green neon

    #80a900 → #009d7b
  • Aa · 1.7:1

    Black text: Fails AA — no plain text

    Green three-step

    #c5d88b → #279936 → #004631
  • Aa · 1.8:1

    White text: Fails AA — no plain text

    Green glow

    #79d77e → #004725
  • Aa · 3.3:1

    Black text: Fails AA — large text only (3:1)

    Green muted

    #84aa85 → #387154
  • Aa · 4.1:1

    Black text: Fails AA — large text only (3:1)

    Green to white

    #098926 → #f5faf5
  • Aa · 4.5:1

    White text: Passes AA

    Green to black

    #098926 → #041105

Using green gradients well

Good for: eco and wellness brands, finance dashboards, success states, botanical themes.

Pairing: Green → teal and lime → emerald stay vivid. Green → yellow gives a fresh “spring” look; blend it in OKLCH to avoid a muddy olive middle.

Readable text: Greens are bright for their saturation: white text usually needs a green darker than about 40% OKLCH lightness to reach 4.5:1. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.

These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.

Questions

What is the CSS code for a green gradient?

A simple green gradient is background: linear-gradient(in oklch 135deg, #2f9f3d 0%, #005e15 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.

What colours go well with green in a gradient?

Green → teal and lime → emerald stay vivid. Green → yellow gives a fresh “spring” look; blend it in OKLCH to avoid a muddy olive middle.

What text colour is readable on a green gradient?

Greens are bright for their saturation: white text usually needs a green darker than about 40% OKLCH lightness to reach 4.5:1. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.

How do I download a green gradient image?

Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.

Where are green gradients typically used?

Common uses: eco and wellness brands, finance dashboards, success states, botanical themes.

More colour gradients