# Gradientes de céu: códigos de amanhecer, meio-dia, entardecer e noite

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

O céu é o gradiente que todo mundo estuda há anos sem querer. Aqui estão códigos para cada hora dele, na ordem em que o céu de verdade os usa, e como pôr palavras sobre cada um.

## The short version

- Um gradiente de céu convincente é mais escuro no alto e mais claro no horizonte, porque a luz perto do horizonte atravessa mais ar.
- No amanhecer e no entardecer, as cores quentes ficam embaixo, perto do horizonte, e os azuis frios permanecem no alto.
- Aplique um gradiente de céu na vertical com `180deg` em CSS, para o topo do design se ler como o topo do céu.
- Céus noturnos parecem mais naturais com uma faixa um pouco mais clara no horizonte do que com um preto chapado.
- Tinta escura funciona bem em céus de meio-dia e fica fraca num céu de amanhecer, enquanto a tinta clara combina com o alto de um céu de amanhecer, o crepúsculo, a hora azul e a noite.

Um **gradiente de céu** vai de uma cor mais profunda no alto a uma mais clara no horizonte, porque é assim que a luz do dia se comporta: a luz perto do horizonte atravessa mais ar, se espalha mais e tende ao branco. Acerte essa única direção e quase qualquer azul se lê como céu. Abaixo estão códigos para copiar de seis horas do dia, da primeira luz a uma noite sem lua, com notas sobre onde cada um funciona e que cor de texto cabe sobre ele.

## Como o céu de verdade se organiza

Olhe para cima num dia limpo e o azul bem acima de você é mais rico que o azul perto dos telhados. No nascer e no pôr do sol, a luz atravessa tanta atmosfera que a maior parte do azul se dispersa antes de chegar a você, e restam vermelhos, laranjas e rosas embaixo, enquanto o zênite continua frio. Isso dá duas regras para qualquer gradiente de céu: escuro no alto, claro embaixo, e cores quentes só perto do horizonte.

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

Um dia de céu em oito cores. Cada hora do dia empresta duas ou três delas, sempre com a mais escura no alto.

## Códigos de gradiente de amanhecer e nascer do sol

O amanhecer é o céu mais suave do dia. O alto ainda é índigo de noite, o meio vira lilás e uma faixa de rosa e pêssego fica no horizonte. Transmite calma e esperança, e por isso combina com marcas de bem-estar, rotinas matinais, anúncios de algo novo e tudo o que queira parecer gentil e não barulhento.

- Amanhecer: 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 damasco: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Três amanheceres. Os pontos quentes nunca sobem além do terço inferior, o que os mantém lendo-se como nascer do sol e não como pôr do sol.

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

Um céu limpo de meio-dia é o clássico **gradiente azul céu**: azul saturado no alto, esmaecendo até um azul claro, quase branco, no horizonte. Mantenha o tom estável e deixe a luminosidade fazer o trabalho. Se o ponto de baixo virar cinza em vez de azul claro, o céu começa a parecer poluído. Uma tarde nublada de bruma é a mesma ideia com menos saturação, e um dia encoberto troca o azul por um cinza 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%)`
- Encoberto: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Céus de dia. O meio-dia limpo é o que as pessoas querem dizer com azul céu; o encoberto serve quando você quer calma sem cor.

Para mais azuis além do céu, do marinho ao gelo, veja os códigos do [gradiente azul](https://gradiently.design/pt-br/guide/blue-gradient). Se quiser também a água sob o céu, o artigo do [gradiente oceano](https://gradiently.design/pt-br/guide/ocean-gradient) funciona ao contrário: claro no alto, profundo embaixo.

## Códigos de golden hour, crepúsculo e hora azul

O céu da noite é onde os gradientes de céu ficam dramáticos. A golden hour mantém um azul de dia no alto e um âmbar forte no horizonte, e a faixa acinzentada e suave entre os dois é real, então não lute contra ela. O crepúsculo leva o azul ao marinho e acrescenta magenta e coral. A hora azul, o breve intervalo depois que o sol se foi, é quase toda azul e é um dos fundos escuros mais favoráveis que existem.

- Golden hour: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Crepúsculo: do 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 de fim de dia. O crepúsculo é o mais carregado de todos os códigos aqui, então dê-lhe menos palavras e mais espaço.

Se o seu design se entrega por completo a laranjas e rosas, sem azul algum, você passou do céu para o pôr do sol, e os códigos do [gradiente de pôr do sol](https://gradiently.design/pt-br/guide/sunset-gradient) vão servir melhor.

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

Um céu noturno raramente é preto puro. As cidades, a lua e o leve brilho da atmosfera mantêm o horizonte um pouco mais claro que o zênite. Monte um gradiente noturno com o alto quase preto e o horizonte azul-marinho profundo e ele se lê como céu; inverta e ele se lê como um buraco. Para estrelas, luar e muito mais azuis escuros, leia o guia do [gradiente de céu noturno](https://gradiently.design/pt-br/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. Acrescente um grão fino por cima, porque um gradiente tão escuro forma faixas com facilidade nas telas.

> **Céus escuros formam faixas** Os códigos de hora azul e de noite passam por pouquíssimos valores de cor distintos, então telas e exportações comprimidas mostram degraus visíveis. Uma camada leve de ruído resolve, como explica o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).

## Que céu combina com que design

| Céu | Transmite | Bom para | Cor do texto |
| --- | --- | --- | --- |
| Amanhecer | Gentil, esperançoso | 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 |
| Encoberto | Calmo, sério | Relatórios, anúncios discretos | Grafite |
| Golden hour | Quente, nostálgico | Hospitalidade, fotografia, casamentos | Marrom escuro ou branco perto do alto |
| Crepúsculo | Dramático, social | Eventos, música, vida noturna | Branco |
| Hora azul e noite | Premium, concentrado | Tech, cinema, aberturas à noite | Branco ou azul claro |

Um ponto de partida. Teste suas palavras de verdade no seu fundo de verdade, porque um único gradiente pode pedir texto escuro numa ponta e claro na outra.

Esse último ponto pesa mais nos céus que na maioria dos gradientes, porque um céu vai do escuro ao claro por natureza. Ponha as palavras onde o céu é mais calmo e escolha a tinta para essa área, não para o gradiente inteiro. O [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) aprofunda. No Gradiently isso é resolvido por você: um Mark mantém sua região mais calma atrás das palavras, e o Tinta automática escolhe texto claro ou escuro linha a linha a partir da paleta do próprio Mark.

Um story vertical com fundo em cores de amanhecer e o título De pé antes do sol na metade de cima

Um story para uma aula cedinho. O título fica em texto claro no céu calmo do alto, e os detalhes ficam mais embaixo, onde a luz é mais suave.

## Gradientes de céu para cada formato

Os formatos altos combinam perfeitamente com céus: um story ou um pin pode mostrar a subida inteira do horizonte ao zênite. Os formatos largos a achatam, então mantenha as cores do horizonte no terço inferior e deixe o céu de cima preencher o resto. É um arranjo diferente para cada tamanho, e por isso 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 precisa ser mais fina, ou engole o quadro.

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

Num site, três propriedades personalizadas bastam para descrever qualquer céu. Troque uma classe e a seção inteira muda de hora, o que é útil para um hero que acompanha o horário local do visitante ou para uma página que escurece conforme 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. Escolha a classe com uma linha de JavaScript que lê o relógio do visitante, ou defina à mão em cada página.

Para ângulos, posições dos pontos e alternativas, veja o [gradiente linear em CSS](https://gradiently.design/pt-br/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 alto a um azul claro como #dceefb no horizonte. O amanhecer e o crepúsculo acrescentam 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 alto. Em CSS, é `linear-gradient(180deg, topo, base)`.

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

No design, o nascer do sol costuma ser 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 subindo mais alto.

### Que cor de texto funciona sobre um gradiente azul céu?

Azul-marinho escuro ou grafite funciona bem em céus de meio-dia e perto do horizonte do amanhecer. Use branco em céus de crepúsculo, hora azul e noite, e no alto do amanhecer, e confira o contraste onde as palavras realmente ficam.

### Por que meu gradiente de céu noturno parece listrado?

Gradientes muito escuros têm poucos degraus de cor, então as telas mostram faixas. Acrescente uma camada leve de grão e exporte em PNG, e não em JPEG muito comprimido.