# Gradientes de céu noturno: azuis profundos, estrelas e luar

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

Um céu noturno credível nunca é um azul-marinho liso. Tem um zénite escuro, um horizonte luminoso e uma luz que vem de algum lado. Aqui ficam as cores, os códigos e os pequenos detalhes que o vendem.

## The short version

- Um gradiente de céu noturno é mais escuro no topo do enquadramento e mais claro junto ao horizonte, porque o céu por cima é o mais afastado de qualquer luz residual.
- Os céus noturnos reais raramente são pretos puros: ficam entre azul-marinho profundo, índigo e cinzento azulado, com uma faixa mais quente ou esverdeada no horizonte.
- As estrelas podem desenhar-se em CSS com pequenos gradientes radiais sobrepostos ao céu, cada um repetido num tamanho de mosaico diferente para que o padrão nunca pareça uma grelha.
- Uma lua lê-se melhor como um pequeno gradiente radial brilhante com uma queda larga e ténue para o azul envolvente.
- Os gradientes azul escuro criam bandas com facilidade, por isso junta um grão leve e exporta PNG ou vídeo de alta qualidade em vez de JPEG muito comprimido.

Um **gradiente de céu noturno** é uma mistura vertical que começa quase preta no topo e sobe para um azul mais suave junto ao horizonte, muitas vezes com uma ténue faixa quente ou azul-petróleo mesmo em baixo. Essa direção importa: por cima fica a parte mais escura de qualquer céu noturno, e o horizonte ainda guarda um pouco de luz dispersa das cidades, do pôr do sol ou da lua. Acerta nessa ordem e até duas cores se leem como noite. Junta uma lua, algumas estrelas e grão, e lê-se como um lugar.

## As cores de um céu noturno real

Olha para fotografias do céu depois de escurecer e vais encontrar muito pouco preto verdadeiro. O zénite é um azul-marinho profundo com um toque de violeta. O meio do céu é índigo ou ardósia. O horizonte apanha a luz que houver: laranja dos candeeiros de rua, lilás na hora azul, um verde ténue sob a aurora em latitudes altas. Escolher estas cores como paragens separadas é o que distingue um céu noturno de um [gradiente azul-marinho](https://gradiently.design/pt-pt/guide/navy-gradient) genérico.

- Zénite: #020611
- Azul-marinho profundo: #0b1a3a
- Azul noturno: #1e3a6e
- Azul do horizonte: #3b5b8f
- Brilho da cidade: #8a5a4a
- Luar: #f4f1e3

Uma paleta noturna prática: quatro azuis de cima para baixo, um tom quente de horizonte e um branco lunar ligeiramente creme em vez de branco puro.

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

Cada um destes vai de cima para baixo a 180 graus, por isso a cor mais escura fica no topo do enquadramento. Copia um tal como está, ou troca a paragem do horizonte para mudar a hora e o cenário.

- Meia-noite limpa: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Hora azul: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Brilho da cidade: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Noite polar: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Escuridão do deserto: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Nascer da lua: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Seis céus. A hora azul tem um horizonte lilás, o brilho da cidade um laranja de sódio, a noite polar um toque de azul-petróleo, e o nascer da lua é iluminado a partir de um ponto brilhante.

Repara que as paragens não estão igualmente espaçadas. A maior parte do enquadramento fica escura e a mudança de cor acontece no quinto inferior, que é como se comporta um horizonte real. Um espaçamento igual faz o céu parecer uma rampa em vez de uma cúpula. Para perceber o raciocínio das paragens desiguais, vê [paragens de cor num gradiente](https://gradiently.design/pt-pt/guide/gradient-stops).

## Como acrescentar uma lua

Uma lua é um gradiente radial com três partes: um pequeno disco quase branco, uma queda rápida para azul pálido e um halo longo e ténue que se desvanece no céu. Mantém o disco pequeno, cerca de 3 a 5 por cento da largura do enquadramento. Uma lua grande e suave lê-se como um foco de luz. Coloca-a fora do centro, alta num canto, para nunca competir com o teu título.

Lua sobre azul-marinho profundo: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

O disco creme termina em 2,5 por cento, o anel azul pálido em 4 por cento e o halo alarga-se até 14 por cento antes de o céu assumir.

Para combinar uma lua com um brilho de horizonte, sobrepõe o gradiente radial a um linear. O guia do [gradiente radial](https://gradiently.design/pt-pt/guide/radial-gradient) explica posições e tamanhos com mais detalhe.

## Como desenhar estrelas em CSS

As estrelas são minúsculos gradientes radiais: um ponto nítido de branco que termina uma fração de píxel depois. Dá a cada camada de estrelas o seu próprio `background-size` para que se repita a um ritmo diferente. Mosaicos de 200, 230, 290 e 170 píxeis repetem-se fora de compasso, por isso o olhar nunca encontra a grelha. Varia também a opacidade: as estrelas reais não têm todas o mesmo brilho.

```css
.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}
```

Quatro camadas de estrelas em tamanhos de mosaico diferentes, uma lua com halo transparente e o céu de meia-noite limpa por baixo.

> **Menos estrelas parecem mais reais** Um campo denso de estrelas parece ruído no ecrã de um telemóvel. Mantém as estrelas esparsas junto ao horizonte, onde a luz as apaga, e deixa algumas maiores levar a cena.

## Ideias de design com gradiente de céu noturno

Os céus noturnos servem eventos tardios, lançamentos, marcas de sono e bem-estar, clubes de astronomia, lançamentos musicais e tudo o que acontece depois de escurecer. A metade superior escura é a casa natural do texto claro, e o horizonte mais claro dá ao olhar um chão. Põe o título na parte superior central e mantém a lua longe dele. Se as palavras cruzarem a faixa do horizonte, confirma que ainda se leem: [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) trata das regras de contraste.

Uma publicação vertical de evento para uma noite de observação de estrelas, com texto claro no alto de um céu noturno azul profundo

Uma publicação de Instagram em 1080×1350, com as palavras no alto, na parte escura do céu.

Um story vertical com um título curto e calmo sobre um gradiente azul meia-noite para um produto de sono

Um Story em 1080×1920 para uma marca de sono. O enquadramento mais alto deixa mais céu por cima das palavras.

| Uso | Tamanho | Onde fica a luz |
| --- | --- | --- |
| Fundo de telemóvel | Enquadramento de story 1080×1920 | Brilho do horizonte em baixo, abaixo da dock |
| Destaque de site | 1920×1080 | Lua em cima à direita, título à esquerda |
| Publicação de evento | 1080×1350 | Brilho em baixo, palavras no alto |
| Capa de playlist | 1080×1080 | Lua pequena e fora do centro |
| Diapositivos | 1920×1080 | Mantém o céu escuro atrás do título |

Onde colocar as partes brilhantes de um céu noturno nos formatos comuns.

## Como evitar bandas num gradiente azul escuro

O azul escuro é onde as [bandas num gradiente](https://gradiently.design/pt-pt/guide/gradient-banding) mais se notam, porque os ecrãs têm poucos degraus distintos entre quase pretos. Espalha as paragens mais escuras por uma distância maior, junta uma camada de ruído fino com opacidade muito baixa e evita compressão JPEG forte. Para paletas escuras mais profundas em geral, [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) tem mais receitas, e os [gradientes de galáxia](https://gradiently.design/pt-pt/guide/galaxy-gradient) levam o mesmo céu para violeta e magenta.

Se preferires não construir à mão o grão, a luz e a legibilidade, os Marks do Gradiently são fundos vivos que se geram em todos os tamanhos em que desenhas e se acalmam atrás das tuas palavras. Procura no Mercado palavras de cor como “meia-noite” ou “azul-marinho profundo” e desenha de graça com qualquer Mark por reivindicar.

## FAQ

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

Começa com um azul-marinho quase preto como `#020611` no topo, passa por `#0b1a3a` e `#1e3a6e` e termina com um azul mais claro como `#3b5b8f` no horizonte. Junta uma paragem quente ou lilás mesmo em baixo para a luz da cidade ou a hora azul.

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

De cima para baixo a 180 graus, mais escuro no topo. À noite, o céu por cima é sempre mais escuro do que o horizonte.

### Como acrescento estrelas a um gradiente CSS?

Sobrepõe vários pontos minúsculos de `radial-gradient()` ao céu e dá a cada camada um `background-size` diferente, para que as repetições fiquem fora de compasso e nunca pareçam uma grelha.

### Porque é que o meu gradiente azul escuro mostra riscas?

São bandas: poucos degraus de cor numa grande área escura. Junta um pouco de grão, afasta mais as paragens escuras e exporta em PNG em vez de JPEG comprimido.

### Um gradiente de céu noturno fica bem atrás de texto?

Sim, o texto claro lê-se bem no céu escuro superior. Mantém o título longe da lua e da faixa brilhante do horizonte.