# Gradientes verdes: frescos, profundos e elétricos

[Canonical HTML page](https://gradiently.design/pt-br/guide/green-gradient)

O verde pode ser uma manhã de primavera, um clube privado ou o flyer de uma rave. Aqui estão gradientes verdes para cada um, com códigos, e uma saída para o clichê do verde-folha.

## The short version

- Um gradiente verde mistura tons de verde, do menta pálido e do verde-sálvia ao esmeralda, ao verde-floresta e ao lima elétrico, muitas vezes com um vizinho verde-azulado ou amarelo.
- O verde é muito associado a natureza, saúde, crescimento e dinheiro, e é por isso que é tão comum em sustentabilidade, bem-estar e finanças.
- O verde se mistura bem com verde-azulado, azul e amarelo, mas tende a ficar cinza quando misturado diretamente com rosa, vermelho ou roxo.
- O texto branco funciona sobre verdes profundos como #14532d, mas um verde médio como #16a34a precisa de texto escuro ou de tamanhos grandes.
- Verdes inesperados como oliva, verde-garrafa e chartreuse, combinados com uma cor parceira que não venha da natureza, fogem do visual ecológico cansado.

Um **gradiente verde** mistura tons de verde, do menta pálido e do verde-sálvia, passando pelo esmeralda e pelo verde-floresta, até o lima elétrico, muitas vezes com um vizinho verde-azulado ou amarelo. O verde tem mais alcance do que quase qualquer outra cor: pode parecer fresco e limpo, profundo e caro ou barulhento e sintético. Abaixo estão paletas de gradiente verde para cada clima, com CSS para copiar, as cores de texto que funcionam sobre elas e como evitar parecer mais um relatório de sustentabilidade.

## A família do verde

Os verdes pendem para dois lados. Em direção ao amarelo, viram lima, chartreuse e oliva, que parecem quentes, enérgicos ou terrosos. Em direção ao azul, viram verde-azulado, jade e esmeralda, que parecem frios, calmos e refinados. Acinzente-os e você tem o verde-sálvia, suave e adulto. Escureça-os e você tem o verde-floresta e o verde-garrafa, que parecem tradicionais e um pouco luxuosos.

- Menta: #d1fae5
- Sálvia: #a3b18a
- Lima: #a3e635
- Esmeralda: #059669
- Verde-azulado: #0f766e
- Oliva: #556b2f
- Floresta: #14532d
- Verde-garrafa: #0b3b2e

Oito verdes. Versões puxadas para o amarelo, para o azul, acinzentadas e profundas de uma mesma família de cor.

## O que um gradiente verde transmite

As associações mais difundidas do verde são natureza, crescimento, saúde e frescor, que vêm direto das plantas. A convenção acrescentou outras: siga no semáforo, dinheiro nos Estados Unidos por causa das cédulas e sucesso em painéis e apps de finanças. Em alguns lugares ele também carrega significados religiosos e nacionais; o guia de [significados das cores pelo mundo](https://gradiently.design/pt-br/guide/color-meanings-around-the-world) fala deles.

Na prática, isso significa que o tom fala quase tudo. Menta diz limpo. Sálvia diz calmo e ponderado. Floresta e garrafa dizem tradição. Lima diz energia. Verde-azulado diz refinamento. Decida qual desses você quer dizer antes de escolher um gradiente, e fica muito mais fácil escolher entre as paletas abaixo.

## Gradientes verdes frescos e verde-menta

Verdes pálidos parecem limpos, frescos e leves. Combinam com skincare, saúde, comida e tudo o que precisa parecer fresco. Mantenha o texto escuro e aqueça um pouco uma das pontas para que não pareçam clínicos.

- Menta: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)`
- Manhã de primavera: `linear-gradient(160deg, #f0fdf4 0%, #bbf7d0 55%, #fef9c3 100%)`
- Papel sálvia: `linear-gradient(135deg, #e3eadb 0%, #a3b18a 100%)`
- Água ao lima: `linear-gradient(135deg, #ccfbf1 0%, #d9f99d 100%)`

Gradientes verdes claros. As pontas amarelas e lima trazem calor e evitam que pareçam frios.

## Gradientes verdes profundos e verde-floresta

Os verdes escuros estão entre as cores com cara mais cara que existem. Pense em carros de corrida, bibliotecas antigas e embalagens tradicionais. Sustentam bem texto branco e creme e combinam lindamente com dourado, latão e um branco quente.

- Verde-garrafa: `linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%)`
- Chão da floresta: `linear-gradient(160deg, #0a1f14 0%, #14532d 55%, #3f7d4e 100%)`
- Brilho esmeralda: `radial-gradient(circle at 70% 20%, #34d399 0%, #065f46 40%, #022c22 100%)`
- Oliva ao latão: `linear-gradient(135deg, #1a2410 0%, #556b2f 60%, #c9b458 100%)`

Gradientes verdes profundos. Oliva ao latão mostra como o verde escuro aceita bem um parceiro metálico quente.

## Gradientes lima elétrico e verde neon

Os verdes ácidos e lima são barulhentos e sintéticos no melhor sentido. Combinam com esporte, música, games e lançamentos de tecnologia. Sobre um fundo quase preto eles brilham; sobre o branco podem cansar a vista, então use-os em áreas pequenas nesse caso.

- Lima sobre preto: `linear-gradient(135deg, #0a0a0a 0%, #1a2e05 50%, #a3e635 100%)`
- Lima ao limão-siciliano: `linear-gradient(135deg, #84cc16 0%, #facc15 100%)`
- Brilho ácido: `radial-gradient(circle at 50% 50%, #bef264 0%, #4d7c0f 45%, #0c1a05 100%)`
- Verde ao ciano: `linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)`

Verdes elétricos. Só vizinhos: preto, amarelo e ciano.

## Gradientes verde-azulados e jade

O verde puxado para o azul é calmo, refinado e discretamente confiante. Funciona bem para finanças, bem-estar e viagens, e é menos previsível do que o azul puro nessas categorias.

- Verde-azulado profundo: `linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)`
- Jade à água: `linear-gradient(135deg, #064e3b 0%, #0d9488 50%, #67e8f9 100%)`
- Luz de laguna: `linear-gradient(135deg, #134e4a 0%, #2dd4bf 60%, #f0fdfa 100%)`

Verde-azulado e jade. Ficam entre os verdes acima e os [gradientes azuis](https://gradiently.design/pt-br/guide/blue-gradient).

## Como fugir do clichê da sustentabilidade

Como o verde está tão ligado à natureza, virou a cor padrão de tudo o que é ecológico, orgânico ou sustentável. Um verde-folha vivo, um fundo branco e um ícone de folha hoje representam a categoria, não uma empresa em particular. Se você atua nessa área e quer ser notado, mude pelo menos uma dessas três coisas.

### Clichê

- Verde-folha vivo sobre branco
- Verde misturado só com mais verde e azul
- Folhas, globos e brotos como decoração
- Acabamento digital liso e brilhante

### Novo

- Oliva, garrafa, sálvia ou chartreuse
- Um parceiro que não vem da natureza: rosa, lilás, creme ou preto
- Tipografia e textura em vez de ícones
- Grão de papel ou um material fosco

Verde e rosa formam um par especialmente bom para isso, porque a combinação parece botânica sem ser literal. Mas eles ficam quase opostos no círculo cromático, então mantenha-os em áreas separadas em vez de misturar um no outro. As [cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) explicam por quê.

Verde-garrafa e rosa, divididos: `linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)`

Dois opostos lado a lado com uma borda dura. Marcante, botânico e nada parecido com uma paleta ecológica de banco de imagens.

## Texto sobre gradientes verdes

| Texto sobre o fundo | Contraste | Veredito |
| --- | --- | --- |
| Branco sobre `#14532d` | 9,1:1 | Excelente |
| Branco sobre `#15803d` | 5,0:1 | Bom para texto corrido |
| Branco sobre `#16a34a` | 3,3:1 | Só texto grande |
| `#052e16` sobre `#22c55e` | 6,5:1 | Tinta escura funciona aqui |
| `#052e16` sobre `#a3e635` | 9,9:1 | Excelente |
| `#052e16` sobre `#86efac` | 10,6:1 | Excelente |

Razões de contraste WCAG, calculadas. O texto corrido precisa de 4,5:1, o texto grande de 3:1.

Os verdes vivos são mais claros do que parecem, então o texto branco sobre eles costuma falhar. Uma tinta verde bem escura se lê melhor e mantém tudo na mesma família. Confira o ponto mais claro atrás do texto branco em qualquer gradiente; o guia de [texto sobre um gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) mostra como.

Um post de notas de campo em retrato com o título O que cresce em outubro sobre um gradiente profundo

Um campo calmo e profundo para um post editorial.

Um story vertical de contagem regressiva com a frase Faltam 3 dias sobre um gradiente vivo

Um story de contagem regressiva chamativo, onde um verde elétrico brilharia.

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

Verde-garrafa com texto creme quente: uma combinação premium e fácil.

Para mais paletas tiradas de florestas, campos e água, veja as [paletas de cores da natureza](https://gradiently.design/pt-br/guide/nature-color-palettes).

## FAQ

### Que cores combinam com o verde num gradiente?

Verde-azulado, azul, amarelo e lima se misturam bem com o verde. Rosa, vermelho e roxo são parceiros marcantes, mas devem ficar em áreas separadas, porque misturar o verde neles deixa cinza.

### Qual é o CSS de um gradiente verde escuro?

Por exemplo, linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) dá um verde-garrafa profundo. Toda paleta desta página pode ser copiada como CSS.

### Que cor de texto funciona sobre o verde?

Branco ou creme funcionam sobre verdes profundos. Sobre verdes vivos ou claros, use uma tinta verde bem escura, porque o texto branco costuma ficar abaixo do contraste recomendado.

### Como usar o verde sem parecer uma marca ecológica?

Escolha verdes menos previsíveis como oliva, garrafa ou chartreuse, combine-os com uma cor que não venha da natureza, como rosa ou lilás, e use textura ou tipografia em vez de motivos de folhas.