# Degradê verde e azul: códigos frescos que parecem naturais

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

Verde encontrando azul é a cor da água rasa sobre a areia, de um lago sob os pinheiros, da aurora boreal. Por isso o par parece tão natural. Veja como manter isso.

## The short version

- Um degradê verde e azul mistura tons frios vizinhos, como esmeralda #10b981, verde-azulado #0d9488 e azul-céu #0284c7, com verde-azulado ou aqua no meio.
- Como verde e azul são adjacentes no círculo cromático, a mistura fica limpa e parece natural porque imita água, gelo e céu.
- Verdes e aquas vivos são claros demais para texto branco, então use um verde-azulado profundo como tinta nas versões claras e branco ou menta nas escuras.
- Degradês verde e azul escuros passam calma e confiança, enquanto as versões claras passam frescor e limpeza.
- O par combina com viagem, bem-estar, finanças, marcas de ar livre e tecnologia, e um toque quente como areia ou coral evita que pareça frio.

Um **degradê verde e azul** mistura dois vizinhos frios: verdes como esmeralda `#10b981` ou menta `#a7f3d0` e azuis como `#0284c7` ou céu `#bae6fd`, com o verde-azulado e o aqua formando a ponte entre eles. A mistura fica limpa porque não há ponto cinza entre os dois tons. Parece natural porque você o vê a vida inteira na água, no gelo e no céu. Os códigos aqui seguem quatro paisagens, com as cores de texto que funcionam em cada uma e CSS para modo claro e escuro.

## Por que verde e azul combinam tão naturalmente

Verde e azul são [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors): ficam lado a lado no círculo, então cada passo entre eles é uma cor real, na maioria verde-azulado e aqua. A natureza mostra o par o tempo todo, de mares rasos em que a água azul corre sobre algas verdes e areia a lagos glaciais e florestas de pinheiros refletidas em água parada. Tomar emprestado dessas cenas é a forma mais fácil de deixar o degradê calmo em vez de corporativo.

- Tinta verde-azulado profundo: #042f2e
- Pinheiro: #065f46
- Esmeralda: #10b981
- Verde-azulado: #0d9488
- Aqua: #22d3ee
- Azul-lago: #0284c7
- Menta: #a7f3d0
- Céu: #bae6fd

A faixa do verde ao azul com uma tinta profunda para o texto. Verde-azulado e aqua são as cores de ponte que mantêm a mistura contínua.

## Lagoa: degradês vivos de aqua e verde

A água rasa tropical é quase toda aqua, com verde onde é mais rasa e azul onde fica mais funda. Esses degradês têm cara de férias. Acrescente um ponto de areia quente se quiser que pareçam uma praia e não uma piscina.

- Lagoa: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Recife: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Banco de areia: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Degradês vivos de verde e azul. O terceiro acrescenta areia embaixo, o que aquece o quadro todo. [Degradês de oceano](https://gradiently.design/pt-br/guide/ocean-gradient) tem mais.

## Lago de pinheiros: degradês profundos de verde e azul

Verde escuro correndo para azul escuro parece silencioso, caro e confiável. Pense em um lago na floresta ao anoitecer ou na cor de uma garrafa antiga. Eles sustentam bem o texto branco e combinam com finanças, equipamentos de ar livre, arquitetura e qualquer marca que queira passar firmeza.

- Lago de pinheiros: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Verde-azulado ao luar: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Garrafa ao marinho: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Verde e azul escuros. Eles formam faixas com facilidade em imagens comprimidas, então acrescente um grão fino antes de exportar.

## Geleira: degradês de menta pálida e céu

Clareie o par por completo e você tem gelo de geleira e manhãs frias: limpo, arejado e muito calmo. Combinam com saúde, cuidados com a pele, limpeza e apps de produtividade. Podem parecer clínicos, então um toque de branco quente ajuda.

- Geleira: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Manhã fria: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Gelo ao sol: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Verde e azul pálidos. A tinta verde-azulado profundo funciona em todos. [Degradês de menta](https://gradiently.design/pt-br/guide/mint-gradient) vai mais fundo no verde.

## Aurora: verde e azul em um céu noturno

A aurora boreal é luz verde e azul sobre o preto, por isso os degradês de aurora estão entre os fundos escuros mais amados. Mantenha a cor em faixas suaves e deixe o fundo escuro ocupar a maior parte do quadro. [Degradês de aurora](https://gradiently.design/pt-br/guide/aurora-gradients) cobre a técnica completa.

- Aurora: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Faixa de luz: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Redemoinho polar: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Verde e azul sobre quase preto. Menta e aqua ficam ótimos como cor de texto sobre eles.

## Cores de texto em degradês verde e azul

Esmeralda e aqua são surpreendentemente claros, então o texto branco nas versões vivas muitas vezes falha. A tinta verde-azulado profundo funciona nas misturas claras e mantém tudo na mesma família; branco e menta se leem bem nas escuras. As razões abaixo usam a fórmula WCAG. [Texto sobre degradê](https://gradiently.design/pt-br/guide/text-on-gradient) mostra o que fazer quando uma linha cruza as duas pontas.

| Fundo | Texto | Contraste | Veredito |
| --- | --- | --- | --- |
| Esmeralda `#10b981` | Branco | 2,5:1 | Reprova |
| Aqua `#22d3ee` | Branco | 1,8:1 | Reprova |
| Verde-azulado `#0d9488` | Branco | 3,7:1 | Só para títulos grandes |
| Menta `#a7f3d0` | Verde-azulado profundo `#042f2e` | 11,3:1 | Excelente |
| Pinheiro `#065f46` | Branco | 7,7:1 | Excelente |
| Noite `#04202a` | Aqua menta `#5eead4` | 11,4:1 | Excelente, cor como tinta |

Em uma mistura de verde e azul, a ponta verde costuma ser a mais clara, então confira o contraste ali primeiro.

Post vertical de viagem com letras verde-azulado profundo sobre um degradê vivo de aqua e verde

Um post de agência de viagens em tons vivos de lagoa, com texto verde-azulado profundo.

Imagem de link horizontal para um app de finanças com letras brancas sobre um degradê de verde escuro a azul-marinho

Uma imagem de link do LinkedIn em pinheiro ao marinho para um app de finanças.

## Como aquecer uma paleta de verde e azul

Verde e azul são ambos frios, então uma marca inteira neles pode parecer distante. Um acento quente resolve. Areia, coral e dourado suave ficam do outro lado do círculo em relação ao verde-azulado, então use-os ao lado do degradê, em um botão, em um logo ou em uma faixa fina em uma das bordas, em vez de misturá-los. [Cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) explica por que misturar através do círculo dá cinza.

### Evite

- Verde-azulado misturado direto com coral
- Texto branco sobre esmeralda ou aqua
- Todas as superfícies em cores frias
- Verde saturado sobre azul saturado em força total

### Faça

- Coral ou areia ao lado do degradê como acento
- Tinta verde-azulado profundo nas misturas claras
- Um branco quente ou creme para painéis e texto
- Uma cor na frente, a outra de apoio

## CSS de degradê verde e azul para modo claro e escuro

```css
.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}
```

Geleira no modo claro, lago de pinheiros no modo escuro. Os mesmos tons, então a marca continua parecendo uma coisa só.

Combinar uma versão clara e uma escura do mesmo verde e azul é um jeito elegante de fazer a troca de tema parecer desenhada e não invertida. [Degradês para modo escuro](https://gradiently.design/pt-br/guide/dark-mode-gradients) vai mais a fundo. No Gradiently, um Mark é renderizado em todos os tamanhos que você cria e escolhe tinta clara ou escura para cada linha a partir da própria paleta, então os tons vivos de lagoa e os escuros de pinheiro mantêm as palavras legíveis.

## FAQ

### Qual é um bom código de degradê verde e azul?

Uma opção viva é `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Para algo mais escuro e calmo, experimente `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Verde e azul combinam?

Sim. São vizinhos no círculo cromático, com verde-azulado e aqua entre eles, então a mistura fica limpa e parece natural.

### Que cor fica entre o verde e o azul?

Verde-azulado, por volta de `#0d9488`, com aqua e turquesa como parentes mais vivos.

### Que cor de texto usar em um degradê verde e azul?

Verde-azulado profundo, como `#042f2e`, nas versões claras, e branco ou menta nas escuras. Branco sobre esmeralda ou aqua vivos reprova no contraste.

### O que um degradê verde e azul significa para uma marca?

Costuma passar calma, frescor e confiança, porque lembra água, céu e plantas. As versões escuras passam firmeza; as claras, limpeza.