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

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

O azul é a cor mais segura do design, e é por isso mesmo que tantos gradientes azuis parecem iguais. Eis vinte que não parecem, 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 verde-azulado, ciano ou violeta vizinho, do gelo pálido ao azul-marinho profundo.
- O azul associa-se amplamente à calma, à fiabilidade e à tecnologia, o que o torna popular e fácil de confundir com o de toda a gente.
- O azul mistura-se com limpeza com verde-azulado, ciano, índigo e violeta, mas tende a ficar cinzento quando misturado diretamente com laranja ou amarelo.
- O texto branco funciona sobre azuis profundos e médios como #1e3a8a e #2563eb, mas falha para texto corrido sobre azuis mais claros como #3b82f6.
- Inclinar um gradiente azul para o verde-azulado ou o violeta, ir para mais profundo ou mais pálido e juntar um destaque quente são as formas mais rápidas de fugir ao visual corporativo.

Um **gradiente azul** mistura tons de azul, muitas vezes com um verde-azulado, ciano ou violeta vizinho. Pode parecer um céu limpo, um oceano profundo, um ecrã à noite ou o relatório anual de um banco, consoante os azuis que escolhes e o modo como os usas. Abaixo estão vinte paletas de gradientes azuis 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

Os gradientes azuis pálidos parecem abertos, limpos e silenciosos. Servem a saúde, as viagens, o bem-estar e as páginas de produto que precisam de espaço. Usa tinta escura sobre eles e junta um toque de calor ou de lilás para não parecerem 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 de pervinca: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Glaciar: `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 impedem-nos de parecerem estéreis.

## Gradientes de azul oceano e verde-azulado

Inclinar o azul para o verde dá-lhe vida. Os gradientes de oceano parecem frescos e naturais e evitam as associações corporativas do azul puro. Servem marcas de viagens, comida, sustentabilidade e ar livre.

- 6. Águas abertas: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Mergulho profundo: `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. Baixios: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Azul a verde-azulado e água-marinha. Os tons vizinhos mantêm cada mistura limpa.

## Gradientes azuis vivos e elétricos

Os azuis saturados são enérgicos e técnicos. Servem lançamentos, aplicações, desporto e eventos. São também os azuis mais comuns na web, por isso são os que mais beneficiam de uma forma inesperada ou de um destaque quente.

- 11. Cobalto a ciano: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Ultramarino a 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 vivos. O número 14 mantém o destaque quente como uma aresta viva, para que o azul e o dourado nunca se misturem em cinzento.

## Gradientes azuis escuros e de meia-noite

Os gradientes de azul-marinho profundo e de meia-noite parecem sérios, sofisticados e calmos. São excelentes bases para letra branca e para destaques brilhantes. Atenção às bandas, que aparecem com facilidade em azuis lentos e escuros; um grão fino resolve-as. Vê as [bandas em gradientes](https://gradiently.design/pt-pt/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. Azul-marinho a índigo: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Crepúsculo sobre a água: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

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

## Que gradiente azul para que trabalho

Vinte paletas são muitas para escolher. Parte do trabalho que o design tem de fazer e das palavras que tem de carregar e escolhe no grupo correspondente.

| Trabalho | Experimenta | Porquê |
| --- | --- | --- |
| Página calma de produto ou saúde | 1, 3, 4 | Pálido, aberto, fácil sob texto escuro |
| Viagens, comida, ar livre | 6, 8, 10 | O azul inclinado para o verde parece natural |
| Lançamento de aplicação ou evento de tecnologia | 11, 13, 15 | Saturado e iluminado, lê-se como energia |
| Sofisticado ou finanças | 16, 17, 19 | As bases profundas parecem sérias e aguentam letra branca |
| 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 referem-se às paletas acima.

## O que o azul sinaliza e o problema da falta de graça

Em grande parte do mundo, o azul associa-se à calma, à fiabilidade e à profundidade, em parte por causa do céu e da água. É por isso que é tão comum na banca, nos seguros, na saúde e na tecnologia. É também por isso que um gradiente de azul médio raramente ajuda alguém a reconhecer-te: parece a categoria e não a empresa. A [psicologia das cores](https://gradiently.design/pt-pt/guide/color-psychology) explica porque a convenção corta nos dois sentidos.

### Azul corporativo

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

### Azul distintivo

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

O azul mistura-se bem com os vizinhos: verde-azulado, ciano, índigo e violeta. Mistura-se mal com os opostos. O azul diretamente para laranja ou amarelo passa por um meio acinzentado, por isso mantém curtos os destaques quentes ou faz passá-los por violeta ou rosa. As [cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) explicam porquê.

## Texto sobre gradientes azuis

| Texto sobre fundo | Contraste | Veredicto |
| --- | --- | --- |
| 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 | A tinta escura funciona aqui |
| `#0b1a33` sobre `#bae6fd` | 13,1:1 | Excelente |

Rácios de contraste WCAG, calculados. O texto corrido precisa de 4,5:1 e o texto grande de 3:1.

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

Uma publicação vertical de estatística com 98% em letra grande sobre um gradiente profundo

Um campo profundo faz um número dizer tudo.

Um story vertical com as palavras Respira fundo sobre um gradiente calmo

Um story mais calmo, com muito espaço aberto.

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

Paleta 20, Crepúsculo sobre a água, como fundo de cabeçalho. Mantém os títulos na parte superior, mais escura.

Exportar um gradiente azul como imagem para redes sociais precisa de um passo extra. As plataformas voltam a comprimir os carregamentos, e os azuis lentos e escuros estão entre as primeiras cores a quebrar em bandas visíveis. Exporta no tamanho recomendado pela plataforma, junta um grão fino antes de guardar e usa PNG onde a plataforma o aceitar. Os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) mostram quanto grão é suficiente.

Para os roxos ao lado do azul, vê os [gradientes roxos](https://gradiently.design/pt-pt/guide/purple-gradient); para opções mais verdes, vê os [gradientes verdes](https://gradiently.design/pt-pt/guide/green-gradient).

## FAQ

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

O verde-azulado, o ciano, o índigo e o violeta misturam-se com limpeza com o azul. As cores quentes como o coral e o dourado dão bons destaques se forem curtas, porque misturar o azul diretamente com laranja ou amarelo dá cinzento.

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

Para um azul profundo e calmo, experimenta linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Todas as paletas desta página podem ser copiadas 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 do rácio de 4,5:1 recomendado para texto corrido.

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

Inclina-o para o verde-azulado ou o violeta, escolhe azuis muito profundos ou muito pálidos em vez do azul médio, junta grão e usa um pequeno destaque quente.