# Gradientes azuis: 20 paletas do gelo à meia-noite

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

O azul é a cor mais segura do design, e é exatamente por isso que tantos gradientes azuis parecem iguais. Aqui estão vinte que não parecem, agrupados do mais claro ao mais escuro, com os códigos e o raciocínio por trás deles.

## The short version

- Um gradiente azul mistura tons de azul, muitas vezes com um vizinho verde-azulado, ciano ou violeta, do gelo pálido ao azul-marinho profundo.
- O azul é muito associado a calma, confiabilidade e tecnologia, o que o torna popular e fácil de confundir com o de todo mundo.
- O azul se mistura bem com verde-azulado, ciano, índigo e violeta, mas tende a ficar cinza quando misturado diretamente com laranja ou amarelo.
- O texto branco funciona sobre azuis profundos e médios como #1e3a8a e #2563eb, mas falha em azuis mais claros como #3b82f6 no texto corrido.
- Inclinar um gradiente azul para o verde-azulado ou o violeta, ir mais fundo ou mais pálido e acrescentar um destaque quente são as formas mais rápidas de escapar do visual corporativo.

Um **gradiente azul** mistura tons de azul, muitas vezes com um vizinho verde-azulado, ciano ou violeta. Pode parecer um céu limpo, um oceano profundo, uma tela à noite ou o relatório anual de um banco, dependendo dos azuis que você escolhe e de como os usa. Abaixo estão vinte paletas de gradiente azul com CSS para copiar, agrupadas da mais pálida à mais escura, seguidas das cores de texto que funcionam sobre elas e de como evitar que o azul fique sem graça.

## Gradientes azuis claros: gelo e céu

Gradientes azuis pálidos parecem abertos, limpos e silenciosos. Combinam com saúde, viagens, bem-estar e páginas de produto que precisam de espaço. Use tinta escura sobre eles e acrescente um toque de calor ou lilás para que não pareçam frios e clínicos.

- 1. Gelo: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Céu da manhã: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Névoa pervinca: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Geleira: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Nuvem rosada: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Cinco gradientes azuis claros. As pontas quentes ou lilases em 2, 3 e 5 evitam que pareçam estéreis.

## Gradientes azuis oceânicos e verde-azulados

Inclinar o azul para o verde dá vida a ele. Os gradientes oceânicos parecem frescos e naturais e escapam das associações corporativas do azul puro. Combinam com marcas de viagem, comida, sustentabilidade e atividades ao ar livre.

- 6. Águas abertas: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Mergulho fundo: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Lagoa: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Porto: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Águas rasas: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Azul em verde-azulado e água-marinha. Matizes vizinhos mantêm cada mistura limpa.

## Gradientes azuis vivos e elétricos

Azuis saturados são enérgicos e técnicos. Combinam com lançamentos, apps, esporte e eventos. Também são os azuis mais comuns na web, então se beneficiam mais de uma forma inesperada ou de um destaque quente.

- 11. Cobalto ao ciano: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Ultramar ao violeta: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Brilho azul: `radial-gradient(circle at 30% 20%, #60a5fa 0%, #1d4ed8 45%, #0b1437 100%)`
- 14. Cobalto com borda dourada: `linear-gradient(135deg, #0047ab 0%, #2563eb 86%, #fbbf24 86%, #f59e0b 100%)`
- 15. Sinal ascendente: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Azuis vívidos. O número 14 mantém o destaque quente como uma borda dura, então o azul e o dourado nunca se misturam em cinza.

## Gradientes azul-escuros e meia-noite

Gradientes de azul-marinho profundo e meia-noite parecem sérios, sofisticados e calmos. São ótimas bases para texto branco e destaques brilhantes. Atenção ao banding, que aparece com facilidade em azuis lentos e escuros; um grão fino resolve. Veja o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).

- 16. Meia-noite: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Noite de ardósia: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Brilho no horizonte: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. Marinho ao índigo: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Entardecer sobre a água: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Cinco azuis escuros. O último termina num coral quente, como a última luz sobre o mar.

## Qual gradiente azul para qual trabalho

Vinte paletas são muitas para escolher. Comece pelo trabalho que o design precisa fazer e pelas palavras que precisa carregar e depois escolha no grupo correspondente.

| Trabalho | Experimente | Por quê |
| --- | --- | --- |
| Página calma de produto ou de saúde | 1, 3, 4 | Pálidos, abertos, fáceis sob texto escuro |
| Viagem, comida, ar livre | 6, 8, 10 | O azul inclinado ao verde parece natural |
| Lançamento de app ou evento de tecnologia | 11, 13, 15 | Saturados e iluminados, transmitem energia |
| Premium ou finanças | 16, 17, 19 | Bases profundas parecem sérias e sustentam texto branco |
| Algo memorável | 2, 14, 20 | Uma nota quente faz o azul parecer específico |

Um ponto de partida para cada tipo de design. Os números se referem às paletas acima.

## O que o azul sinaliza e o problema da mesmice

Em boa parte do mundo, o azul é associado a calma, confiabilidade e profundidade, em parte por causa do céu e da água. É por isso que é tão comum em bancos, seguros, saúde e tecnologia. É também por isso que um gradiente de azul médio raramente ajuda alguém a reconhecer você: ele parece a categoria, e não a empresa. A [psicologia das cores](https://gradiently.design/pt-br/guide/color-psychology) explica por que a convenção corta para os dois lados.

### Azul corporativo

- Um azul médio a um azul mais claro a 135 graus
- Azul primário puro e totalmente saturado
- Liso e chapado, sem textura
- Azul em todo lugar, nada de quente

### Azul distintivo

- Inclinado ao verde-azulado, ao índigo ou ao violeta
- Muito profundo ou muito pálido, não o do meio
- Grão, brilho ou um brilho suave
- Um destaque quente: coral, dourado ou damasco

O azul se mistura bem com os vizinhos: verde-azulado, ciano, índigo e violeta. Mistura mal com os opostos. O azul direto no laranja ou no amarelo passa por um meio acinzentado, então mantenha os destaques quentes curtos ou passe-os por violeta ou rosa. As [cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) explicam por quê.

## Texto sobre gradientes azuis

| Texto sobre o fundo | Contraste | Veredito |
| --- | --- | --- |
| Branco sobre `#0b1437` | 18,0:1 | Excelente |
| Branco sobre `#1e3a8a` | 10,4:1 | Excelente |
| Branco sobre `#2563eb` | 5,2:1 | Bom para texto corrido |
| Branco sobre `#3b82f6` | 3,7:1 | Só texto grande |
| `#0b1a33` sobre `#60a5fa` | 6,8:1 | Tinta escura funciona aqui |
| `#0b1a33` sobre `#bae6fd` | 13,1:1 | Excelente |

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

A armadilha está no meio da faixa de azuis: um azul-centáurea brilhante como `#3b82f6` parece forte o bastante para texto branco, mas fica abaixo de 4,5:1. Num gradiente, confira o contraste onde o azul é mais claro atrás das suas palavras. O guia de [texto sobre um gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) traz o método completo.

Um post de estatística em retrato com 98% em letras grandes sobre um gradiente profundo

Um campo profundo faz um único número falar por tudo.

Um story vertical com as palavras Solte o ar sobre um gradiente calmo

Um story mais calmo, com bastante espaço livre.

```css
.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}
```

Paleta 20, Entardecer sobre a água, como fundo de seção principal. Mantenha os títulos na parte de cima, mais escura.

Exportar um gradiente azul como imagem para redes sociais exige mais um passo. As plataformas recomprimem os uploads, e os azuis lentos e escuros estão entre as primeiras cores a se quebrar em faixas visíveis. Exporte no tamanho recomendado pela plataforma, acrescente um grão fino antes de salvar e use PNG onde a plataforma aceitar. Os [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) mostram quanto grão é suficiente.

Para os roxos vizinhos do azul, veja os [gradientes roxos](https://gradiently.design/pt-br/guide/purple-gradient); para opções mais esverdeadas, veja os [gradientes verdes](https://gradiently.design/pt-br/guide/green-gradient).

## FAQ

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

Verde-azulado, ciano, índigo e violeta se misturam bem com o azul. Cores quentes como coral e dourado dão bons destaques se forem curtas, porque misturar o azul direto no laranja ou no amarelo deixa cinza.

### Qual é um bom código CSS para um gradiente azul?

Para um azul profundo e calmo, experimente linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Toda paleta desta página pode ser copiada como CSS.

### O texto branco é legível sobre um gradiente azul?

Em azuis profundos e médio-escuros, sim. Em azuis mais claros como #3b82f6, o texto branco fica abaixo da razão de 4,5:1 recomendada para texto corrido.

### Como faço um gradiente azul parecer menos corporativo?

Incline-o para o verde-azulado ou o violeta, escolha azuis muito profundos ou muito pálidos em vez do azul médio, acrescente grão e use um pequeno destaque quente.