Green gradients: fresh, deep and electric

A green gradient blends shades of green, from pale mint and sage through emerald and forest to electric lime, often with a neighbouring teal or yellow. Green has more range than almost any other colour: it can feel fresh and clean, deep and expensive, or loud and synthetic. Below are green gradient palettes for each mood with copyable CSS, the text colours that work on them and how to avoid looking like every sustainability report.

The green family

Greens lean two ways. Towards yellow they become lime, chartreuse and olive, which feel warm, energetic or earthy. Towards blue they become teal, jade and emerald, which feel cool, calm and polished. Grey them down and you get sage, which is soft and grown-up. Darken them and you get forest and bottle green, which feel established and a little luxurious.

What a green gradient signals

Green's most widely shared associations are nature, growth, health and freshness, which come straight from plants. Convention has added more: go on traffic lights, money in the United States because of its banknotes, and success in dashboards and finance apps. It also carries religious and national meanings in some places; colour meanings around the world covers them.

In practice that means the shade does most of the talking. Mint says clean. Sage says calm and considered. Forest and bottle say heritage. Lime says energy. Teal says polish. Decide which of those you mean before choosing a gradient, and the palettes below become much easier to pick from.

Fresh and mint green gradients

Pale greens feel clean, cool and light. They suit skincare, health, food and anything that should feel fresh. Keep text dark, and warm them slightly at one end so they don't feel clinical.

Deep and forest green gradients

Dark greens are some of the most expensive-looking colours available. Think of racing cars, old libraries and heritage packaging. They carry white and cream text well and pair beautifully with gold, brass and warm off-white.

Electric lime and neon green gradients

Acid and lime greens are loud and synthetic in the best way. They suit sport, music, gaming and tech launches. On a near-black ground they glow; on white they can be hard to look at, so use them in small areas there.

Teal and jade gradients

Green leaning into blue is calm, polished and quietly confident. It works well for finance, wellness and travel, and is less expected than pure blue in those categories.

Avoiding the sustainability cliché

Because green is so strongly linked with nature, it has become the default colour for anything eco, organic or sustainable. A bright leaf green, a white background and a leaf icon now reads as the category, not as any particular company. If you work in that space and want to be noticed, change at least one of those three things.

Green and pink are a particularly good pairing for this, because the combination feels botanical without being literal. They sit nearly opposite on the colour wheel, though, so keep them in separate areas rather than blending one into the other. Complementary colours explains why.

Text on green gradients

Bright greens are lighter than they look, so white text on them usually fails. A very dark green ink reads better and keeps everything in the family. Check the lightest point behind white text on any gradient; text on a gradient shows how.

.panel {
  background-color: #0b3b2e;
  background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%);
  color: #f5f0e6;
}

For more palettes drawn from forests, fields and water, see colour palettes from nature.