# Green gradients: fresh, deep and electric [Canonical HTML page](https://gradiently.design/guide/green-gradient) Green can be a spring morning, a private members' club or a rave flyer. Here are green gradients for each, with codes, and a way out of the leaf-green cliché. ## The short version - A green gradient blends shades of green, from pale mint and sage to emerald, forest and electric lime, often with a neighbouring teal or yellow. - Green is widely associated with nature, health, growth and money, which is why it is so common in sustainability, wellness and finance. - Green blends cleanly towards teal, blue and yellow, but tends to turn grey when blended directly into pink, red or purple. - White text works on deep greens such as #14532d, but a mid green such as #16a34a needs dark text or large sizes. - Unexpected greens such as olive, bottle and chartreuse, paired with a non-natural partner colour, avoid the tired eco look. 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. - Mint: #d1fae5 - Sage: #a3b18a - Lime: #a3e635 - Emerald: #059669 - Teal: #0f766e - Olive: #556b2f - Forest: #14532d - Bottle green: #0b3b2e Eight greens. Yellow-leaning, blue-leaning, greyed and deep versions of one colour family. ## 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](https://gradiently.design/guide/color-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. - Mint: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)` - Spring morning: `linear-gradient(160deg, #f0fdf4 0%, #bbf7d0 55%, #fef9c3 100%)` - Sage paper: `linear-gradient(135deg, #e3eadb 0%, #a3b18a 100%)` - Aqua to lime: `linear-gradient(135deg, #ccfbf1 0%, #d9f99d 100%)` Light green gradients. The yellow and lime ends add warmth and stop them looking cold. ## 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. - Bottle green: `linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%)` - Forest floor: `linear-gradient(160deg, #0a1f14 0%, #14532d 55%, #3f7d4e 100%)` - Emerald glow: `radial-gradient(circle at 70% 20%, #34d399 0%, #065f46 40%, #022c22 100%)` - Olive to brass: `linear-gradient(135deg, #1a2410 0%, #556b2f 60%, #c9b458 100%)` Deep green gradients. Olive to brass shows how well dark green takes a warm metallic partner. ## 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. - Lime on black: `linear-gradient(135deg, #0a0a0a 0%, #1a2e05 50%, #a3e635 100%)` - Lime to lemon: `linear-gradient(135deg, #84cc16 0%, #facc15 100%)` - Acid glow: `radial-gradient(circle at 50% 50%, #bef264 0%, #4d7c0f 45%, #0c1a05 100%)` - Green to cyan: `linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)` Electric greens. Neighbours only: black, yellow and cyan. ## 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. - Deep teal: `linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)` - Jade to aqua: `linear-gradient(135deg, #064e3b 0%, #0d9488 50%, #67e8f9 100%)` - Lagoon light: `linear-gradient(135deg, #134e4a 0%, #2dd4bf 60%, #f0fdfa 100%)` Teal and jade. These sit between the greens above and the [blue gradients](https://gradiently.design/guide/blue-gradient). ## 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. ### Cliché - Bright leaf green on white - Green blended with more green and blue only - Leaves, globes and sprouts as decoration - Smooth, glossy digital finish ### Fresh - Olive, bottle, sage or chartreuse - A non-natural partner: pink, lilac, cream or black - Type and texture instead of icons - Paper grain or a matte material 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](https://gradiently.design/guide/complementary-colors) explains why. Bottle green and rose, split: `linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)` Two opposites side by side with a hard edge. Striking, botanical and nothing like a stock eco palette. ## Text on green gradients | Text on background | Contrast | Verdict | | --- | --- | --- | | White on `#14532d` | 9.1:1 | Excellent | | White on `#15803d` | 5.0:1 | Good for body text | | White on `#16a34a` | 3.3:1 | Large text only | | `#052e16` on `#22c55e` | 6.5:1 | Dark ink works here | | `#052e16` on `#a3e635` | 9.9:1 | Excellent | | `#052e16` on `#86efac` | 10.6:1 | Excellent | WCAG contrast ratios, calculated. Body text needs 4.5:1, large text 3:1. 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](https://gradiently.design/guide/text-on-gradient) shows how. A portrait field notes post titled What grows in October on a deep gradient A calm, deep field for an editorial post. A vertical countdown story reading 3 days to go on a bright gradient A loud countdown story, where an electric green would glow. ```css .panel { background-color: #0b3b2e; background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%); color: #f5f0e6; } ``` Bottle green with warm cream text: an easy, premium pairing. For more palettes drawn from forests, fields and water, see [colour palettes from nature](https://gradiently.design/guide/nature-color-palettes). ## FAQ ### What colours go well with green in a gradient? Teal, blue, yellow and lime blend cleanly with green. Pink, red and purple make striking partners but should sit in separate areas, because blending green into them turns grey. ### What is the CSS for a dark green gradient? For example, linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) gives a deep bottle green. Every palette on this page can be copied as CSS. ### What text colour works on green? White or cream works on deep greens. On bright or light greens, use a very dark green ink, because white text usually falls below the recommended contrast. ### How do I use green without looking like an eco brand? Choose less expected greens such as olive, bottle or chartreuse, pair them with a non-natural colour like pink or lilac, and use texture or type instead of leaf motifs.