# Gradientes verde e azul: códigos frescos e naturais

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

O verde a encontrar o azul é a cor da água rasa sobre a areia, de um lago por baixo dos pinheiros, da aurora boreal. Por isso o par soa tão naturalmente. Eis como o manter assim.

## The short version

- Um gradiente verde e azul mistura matizes frios vizinhos, como esmeralda #10b981, verde-azulado #0d9488 e azul-céu #0284c7, com verde-azulado ou água-marinha no meio.
- Como o verde e o azul são adjacentes no círculo cromático, a mistura fica limpa, e parece natural porque imita a água, o gelo e o céu.
- Os verdes vivos e as águas-marinhas são claros demais para texto branco, por isso usa tinta verde-azulada escura nas versões claras e branco ou menta nas escuras.
- Os gradientes verde e azul escuros transmitem calma e confiança, enquanto as versões claras transmitem frescura e limpeza.
- O par serve viagens, bem-estar, finanças, marcas de ar livre e tecnologia, e um acento quente como areia ou coral evita que pareça frio.

Um **gradiente 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 a água-marinha a fazer a ponte entre eles. A mistura fica limpa porque não há um ponto cinzento entre os dois matizes. Parece natural porque o viste a vida toda na água, no gelo e no céu. Os códigos aqui seguem quatro paisagens, com as cores de texto que se leem em cada uma e CSS para modo claro e escuro.

## Porque é que o verde e o azul ficam naturais juntos

O verde e o azul são [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors): estão lado a lado no círculo, por isso cada passo entre eles é uma cor real, sobretudo verde-azulado e água-marinha. A natureza mostra este par constantemente, dos mares rasos onde a água azul corre sobre algas verdes e areia aos lagos glaciares e pinhais refletidos em água parada. Inspirar-se nessas cenas é a maneira mais fácil de o gradiente parecer calmo e não corporativo.

- Tinta verde-azulada escura: #042f2e
- Pinheiro: #065f46
- Esmeralda: #10b981
- Verde-azulado: #0d9488
- Água-marinha: #22d3ee
- Azul de lago: #0284c7
- Menta: #a7f3d0
- Céu: #bae6fd

A gama do verde ao azul com uma tinta escura para o texto. O verde-azulado e a água-marinha são as cores de ponte que mantêm a mistura contínua.

## Lagoa: gradientes vivos de água-marinha e verde

A água tropical rasa é sobretudo água-marinha, com verde onde é mais rasa e azul onde aprofunda. Estes gradientes têm brilho de férias. Junta uma paragem de areia quente se os quiseres com ar de praia e não de 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%)`

Gradientes vivos de verde e azul. O terceiro junta areia em baixo, o que aquece todo o quadro. [Gradientes de oceano](https://gradiently.design/pt-pt/guide/ocean-gradient) tem mais.

## Lago de pinhal: gradientes escuros de verde e azul

O verde escuro a correr para azul escuro soa a calma, a valor e a confiança. Pensa num lago de floresta ao anoitecer, ou na cor de uma garrafa antiga. Suportam bem texto branco e servem finanças, equipamento de ar livre, arquitetura e qualquer marca que queira parecer estável.

- Lago de pinhal: `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 e marinho: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Verde e azul escuros. Fazem faixas com facilidade em imagens comprimidas, por isso junta um grão fino antes de exportar.

## Glaciar: gradientes de menta pálida e céu

Se subires o par ao máximo, ficas com gelo de glaciar e manhãs frias: limpo, arejado e muito calmo. Servem saúde, cuidados de pele, limpeza e aplicações de produtividade. Podem soar clínicos, por isso um toque de branco quente ajuda.

- Glaciar: `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-azulada escura lê-se em todos. [Gradientes de menta](https://gradiently.design/pt-pt/guide/mint-gradient) vai mais fundo no verde.

## Aurora: verde e azul num céu noturno

A aurora boreal é luz verde e azul sobre preto, e por isso os gradientes de aurora estão entre os fundos escuros mais amados. Mantém a cor em faixas suaves e deixa o fundo escuro ocupar a maior parte do quadro. [Gradientes de aurora](https://gradiently.design/pt-pt/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%)`
- Remoinho polar: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Verde e azul sobre quase preto. A menta e a água-marinha dão ambas cores de texto marcantes nestes.

## Cores de texto em gradientes verde e azul

A esmeralda e a água-marinha são surpreendentemente claras, por isso o texto branco nas versões vivas falha muitas vezes. A tinta verde-azulada escura funciona nas misturas claras e mantém tudo na mesma família; o branco e a menta lêem-se bem nas escuras. Os rácios abaixo usam a fórmula WCAG. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) mostra o que fazer quando uma linha atravessa as duas pontas.

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

Numa mistura de verde e azul, a ponta verde costuma ser a mais clara, por isso verifica primeiro o contraste aí.

Uma publicação vertical de viagens com letras verde-azuladas escuras sobre um gradiente vivo de água-marinha e verde

Uma publicação de agência de viagens em tons vivos de lagoa, com letra verde-azulada escura.

Uma imagem de ligação horizontal para uma aplicação de finanças com letras brancas sobre um gradiente de verde escuro a marinho

Uma imagem de ligação do LinkedIn em pinheiro e marinho para uma aplicação de finanças.

## Como aquecer uma paleta de verde e azul

O verde e o azul são ambos frios, por isso uma marca inteira neles pode parecer distante. Um acento quente resolve. A areia, o coral e o dourado suave estão do outro lado do círculo em relação ao verde-azulado, por isso usa-os ao lado do gradiente, num botão, num logótipo ou numa faixa fina num bordo, em vez de os misturares. [Cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) explica porque é que misturar através do círculo dá cinzento.

### Evita

- Verde-azulado misturado diretamente em coral
- Texto branco sobre esmeralda ou água-marinha
- Todas as superfícies em cores frias
- Verde saturado sobre azul saturado em força total

### Faz

- Coral ou areia ao lado do gradiente como acento
- Tinta verde-azulada escura nas misturas claras
- Um branco quente ou creme para painéis e texto
- Uma cor a liderar, a outra a apoiar

## CSS de gradiente 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;
  }
}
```

Glaciar no modo claro, lago de pinhal no modo escuro. Os mesmos matizes, por isso a marca continua a parecer uma só coisa.

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

## FAQ

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

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

### O verde e o azul combinam?

Sim. São vizinhos no círculo cromático, com o verde-azulado e a água-marinha pelo meio, por isso a mistura fica limpa e parece natural.

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

O verde-azulado, por volta de `#0d9488`, com a água-marinha e o turquesa como parentes mais vivos.

### Que cor de texto usar num gradiente verde e azul?

Verde-azulado escuro como `#042f2e` nas versões claras, e branco ou menta nas escuras. Branco sobre esmeralda ou água-marinha vivas falha o contraste.

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

Costuma transmitir calma, frescura e confiança, porque evoca a água, o céu e as plantas. As versões escuras soam estáveis; as claras soam limpas.