# Gradientes de céu: códigos de aurora, meio-dia, crepúsculo e noite

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

O céu é o gradiente que toda a gente estuda há anos sem tentar. Eis códigos para cada hora dele, pela ordem que o céu real usa, e como pôr palavras em cada um.

## The short version

- Um gradiente de céu convincente é mais profundo no topo e mais pálido no horizonte, porque a luz perto do horizonte atravessa mais ar.
- Na aurora e no crepúsculo, as cores quentes ficam em baixo, junto ao horizonte, e os azuis frios mantêm-se no alto.
- Corre um gradiente de céu na vertical com `180deg` em CSS, para o topo do design se ler como o topo do céu.
- Os céus noturnos parecem mais naturais com uma faixa ligeiramente mais clara no horizonte do que com um preto uniforme.
- A tinta escura lê-se bem nos céus de meio-dia e fraca num céu de aurora, enquanto a tinta clara serve o topo de um céu de aurora, o crepúsculo, a hora azul e a noite.

Um **gradiente de céu** vai de uma cor mais profunda no alto até uma mais pálida no horizonte, porque é assim que a luz do dia se comporta: a luz perto do horizonte atravessa mais ar, dispersa-se mais e tende para o branco. Acerta nesta única direção e quase qualquer azul se lê como céu. Abaixo tens códigos para copiar para seis horas do dia, da primeira luz a uma noite sem lua, com notas sobre onde cada um funciona e que cor de letra assenta nele.

## Como está organizado o céu verdadeiro

Olha para cima num dia limpo e o azul mesmo por cima de ti é mais rico do que o azul junto aos telhados. Ao nascer e ao pôr do sol, a luz do sol atravessa tanta atmosfera que a maior parte do azul se dispersa antes de te chegar, deixando vermelhos, laranjas e rosas em baixo no céu enquanto o zénite se mantém frio. Isso dá-te duas regras para qualquer gradiente de céu: profundo no topo, pálido em baixo, e cores quentes sempre só perto do horizonte.

- Índigo da aurora: #2b3a67
- Rosa da primeira luz: #e3a6b4
- Zénite do meio-dia: #1f6fd1
- Horizonte do meio-dia: #a9d3f5
- Hora dourada: #f59e42
- Magenta do crepúsculo: #b5507a
- Hora azul: #23407a
- Meia-noite: #03050f

Um dia de céu em oito cores. Cada hora do dia pede emprestadas duas ou três destas, sempre com a mais escura em cima.

## Códigos de gradientes de aurora e nascer do sol

A aurora é o céu mais suave do dia. O topo ainda é índigo de noite, o meio passa a lilás e uma faixa de rosa e pêssego assenta no horizonte. Sente-se calma e cheia de esperança, e por isso serve marcas de bem-estar, rotinas matinais, anúncios de algo novo e tudo o que queira parecer delicado e não ruidoso.

- Aurora: do índigo ao pêssego: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Primeira luz pálida: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Nascer do sol: do lilás ao alperce: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Três auroras. As paragens quentes nunca sobem acima do terço inferior, e é isso que as mantém a ler-se como nascer do sol e não como pôr do sol.

## Gradientes de céu limpo ao meio-dia e de dia

Um céu limpo de meio-dia é o clássico **gradiente azul-céu**: azul saturado no topo a esbater-se para um azul pálido, quase branco, no horizonte. Mantém o tom estável e deixa a luminosidade fazer o trabalho. Se a paragem de baixo ficar cinzenta em vez de azul pálido, o céu começa a parecer poluído. Uma tarde enevoada é a mesma ideia com menos saturação, e um dia nublado troca o azul por um cinzento frio.

- Meio-dia limpo: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Tarde enevoada: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Nublado: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Céus de dia. O meio-dia limpo é o que as pessoas querem dizer por azul-céu; o nublado é útil quando queres calma sem cor.

Para mais azuis além do céu, do azul-marinho ao gelo, vê os códigos de [gradiente azul](https://gradiently.design/pt-pt/guide/blue-gradient). Se queres também a água debaixo do céu, o artigo [gradiente de oceano](https://gradiently.design/pt-pt/guide/ocean-gradient) funciona ao contrário: pálido em cima, profundo em baixo.

## Códigos da hora dourada, do crepúsculo e da hora azul

O céu do fim do dia é onde os gradientes de céu ficam dramáticos. A hora dourada mantém um azul de dia no alto e um âmbar forte no horizonte, e a faixa suave acinzentada entre os dois é real, por isso não lutes contra ela. O crepúsculo faz descer o azul para azul-marinho e junta magenta e coral. A hora azul, o curto período depois de o sol se ter ido, é quase toda azul e é um dos fundos escuros mais favorecedores que existem.

- Hora dourada: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Crepúsculo: do azul-marinho ao coral: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Hora azul: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Céus do fim do dia. O crepúsculo é o mais carregado de todos os códigos aqui, por isso dá-lhe menos palavras e mais espaço.

Se o teu design se inclina por inteiro para laranjas e rosas sem azul nenhum, passaste do céu para o pôr do sol, e os códigos de [gradiente de pôr do sol](https://gradiently.design/pt-pt/guide/sunset-gradient) vão servir-te melhor.

## Códigos de gradientes de céu noturno

Um céu noturno raramente é preto puro. As cidades, a lua e o brilho ténue da atmosfera mantêm o horizonte um toque mais claro do que o zénite. Constrói um gradiente noturno com um topo quase preto e um horizonte azul-marinho profundo e lê-se como céu; inverte-o e lê-se como um buraco. Para estrelas, luar e muitos mais azuis escuros, lê o guia de [gradiente de céu noturno](https://gradiently.design/pt-pt/guide/night-sky-gradient).

Noite sem lua: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Quase preto no alto, azul-marinho profundo no horizonte. Junta um grão fino por cima, porque um gradiente tão escuro forma faixas facilmente nos ecrãs.

> **Os céus escuros formam faixas** Os códigos da hora azul e da noite passam por muito poucos valores de cor distintos, por isso os ecrãs e as exportações comprimidas mostram degraus visíveis. Uma camada leve de ruído resolve, como se explica em [faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

## Que céu serve que design

| Céu | Sensação | Bom para | Cor da letra |
| --- | --- | --- | --- |
| Aurora | Delicada, esperançosa | Bem-estar, lançamentos, eventos matinais | Branco no alto, índigo escuro perto do horizonte |
| Meio-dia limpo | Aberto, otimista | Viagens, apps, ofertas de verão | Azul-marinho escuro |
| Nublado | Calmo, sério | Relatórios, anúncios discretos | Carvão |
| Hora dourada | Quente, nostálgica | Hotelaria, fotografia, casamentos | Castanho escuro ou branco perto do topo |
| Crepúsculo | Dramático, social | Eventos, música, vida noturna | Branco |
| Hora azul e noite | Premium, focada | Tecnologia, cinema, aberturas tardias | Branco ou azul pálido |

Um ponto de partida. Testa as tuas palavras reais sobre o teu fundo real, porque um único gradiente pode pedir letra escura numa ponta e clara na outra.

Este último ponto importa mais nos céus do que na maioria dos gradientes, porque um céu vai do escuro ao claro por definição. Coloca as palavras onde o céu está mais calmo e escolhe a tinta para essa zona, não para o gradiente todo. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) aprofunda o tema. No Gradiently isto é tratado por ti: um Mark mantém a sua zona mais calma atrás das palavras, e a Tinta automática escolhe letra clara ou escura linha a linha a partir da paleta do próprio Mark.

Um story vertical com um fundo de cores de aurora e o título De pé antes do sol na metade superior

Um story para uma aula matinal. O título fica em letra clara no céu calmo do alto, e os detalhes mais abaixo, onde a luz é mais suave.

## Gradientes de céu para todos os formatos

Os formatos altos servem perfeitamente os céus: um story ou um pin pode mostrar toda a subida do horizonte ao zénite. Os formatos largos comprimem-na, por isso mantém as cores do horizonte no terço inferior e deixa o céu alto preencher o resto. É uma disposição diferente para cada tamanho, e é por isso que cortar uma só imagem para vários formatos costuma perder o horizonte.

- Story 1080×1920: 1080 × 1920
- Pin do Pinterest 1000×1500: 1000 × 1500
- Hero de site 1920×1080: 1920 × 1080
- Cabeçalho do X 1500×500: 1500 × 500

No story, o céu tem espaço para respirar. No cabeçalho, a faixa quente do horizonte tem de ser mais fina, ou engole o enquadramento.

## Um gradiente de céu em CSS para cada hora do dia

Num site, três propriedades personalizadas bastam para descrever qualquer céu. Troca uma classe e a secção toda muda de hora, o que dá jeito para um hero que siga a hora local do visitante ou uma página que escurece à medida que uma história avança.

```css
.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }
```

Um gradiente, quatro horas. Escolhe a classe com uma linha de JavaScript que leia o relógio do visitante, ou define-a à mão em cada página.

Para ângulos, posições das paragens e alternativas, vê [gradiente linear em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient).

## FAQ

### Que cores formam um gradiente de céu?

Um céu de dia vai de um azul saturado como #1f6fd1 no topo a um azul pálido como #dceefb no horizonte. A aurora e o crepúsculo juntam rosa, pêssego, magenta ou coral só perto da base.

### Em que direção deve ir um gradiente de céu?

De cima para baixo, com a cor mais escura no topo. Em CSS é `linear-gradient(180deg, topo, base)`.

### Como faço um gradiente de nascer do sol parecer diferente de um pôr do sol?

Em design, o nascer do sol costuma ler-se mais suave e mais frio, com lilás e pêssego e a faixa quente baixa e fina. Os pores do sol tendem a ser desenhados mais saturados, com laranja e magenta mais fortes a subir mais alto.

### Que cor de texto funciona num gradiente azul-céu?

O azul-marinho escuro ou o carvão lêem-se bem nos céus de meio-dia e perto de um horizonte de aurora. Usa branco nos céus de crepúsculo, hora azul e noite e no alto de um céu de aurora, e confirma o contraste onde as palavras realmente ficam.

### Porque é que o meu gradiente de céu noturno parece às riscas?

Os gradientes muito escuros têm poucos degraus de cor, por isso os ecrãs mostram faixas. Junta uma camada leve de grão e exporta em PNG em vez de JPEG muito comprimido.