Green CSS Gradient Generator

A fresh green CSS gradient that grows from lime through emerald into deep teal-green. Natural and energetic, it fits eco, health and finance sites. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.

Type

Angle (120°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(in oklch 120deg, #84cc16 0%, #22c55e 50%, #0f766e 100%);

Tailwind v4 (@theme)

Use it as bg-(image:--gradient-brand)

@theme {
  --gradient-brand: linear-gradient(in oklch 120deg, #84cc16 0%, #22c55e 50%, #0f766e 100%);
}

About the green gradient

Green gradients signal growth, nature and money, which makes them a strong fit for eco, wellness and finance products. This preset runs from a bright lime through emerald into a deep green so the blend feels alive rather than flat. Keep all the stops in the green-to-teal range for a natural look, or push one toward yellow for a more energetic feel. Copy the CSS or the Tailwind v4 @theme token straight from the generator.

The CSS for this gradient:

background: linear-gradient(in oklch 120deg, #84cc16 0%, #22c55e 50%, #0f766e 100%);

Frequently Asked Questions

Use green stops in a linear-gradient, for example background: linear-gradient(120deg, #84cc16 0%, #22c55e 50%, #0f766e 100%);. Start from the preset above, adjust the stops or angle, and copy the CSS.

Pair a bright lime (#84cc16) with an emerald (#22c55e) and a deep teal-green (#0f766e). Keeping the hues within the green-to-teal range gives a natural blend; a touch of yellow makes it more energetic.