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

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

Um céu noturno convincente nunca é um marinho chapado. Tem um zênite escuro, um horizonte brilhante e uma luz que vem de algum lugar. Aqui estão as cores, os códigos e os pequenos detalhes que o fazem funcionar.

## The short version

- Um degradê de céu noturno é mais escuro no topo do quadro e mais claro perto do horizonte, porque o céu acima da cabeça é o mais distante de qualquer luz residual.
- Céus noturnos reais raramente são pretos puros: ficam entre o marinho profundo, o índigo e o cinza azulado, com uma faixa mais quente ou esverdeada no horizonte.
- Estrelas podem ser desenhadas em CSS com minúsculos degradês radiais sobrepostos ao céu, cada um repetido em um tamanho de ladrilho diferente, para o padrão nunca parecer uma grade.
- Uma lua se lê melhor como um pequeno degradê radial brilhante, com uma queda ampla e suave para o azul ao redor.
- Degradês azul escuro formam faixas com facilidade, então use um grão leve e exporte em PNG ou vídeo de alta qualidade em vez de JPEG muito comprimido.

Um **degradê de céu noturno** é uma mistura vertical que começa quase preta no topo e sobe para um azul mais suave perto do horizonte, muitas vezes com uma tênue faixa quente ou verde-azulada bem embaixo. Essa direção importa: o alto é a parte mais escura de qualquer céu noturno, e o horizonte ainda guarda um pouco de luz difusa de cidades, do sol que se pôs ou da lua. Acertando essa ordem, até duas cores se leem como noite. Acrescente uma lua, algumas estrelas e um pouco de grão, e ele se lê como um lugar.

## As cores de um céu noturno real

Olhe fotografias do céu depois de escurecer e você encontrará muito pouco preto de verdade. O zênite é um marinho profundo com um toque de violeta. O meio do céu é índigo ou ardósia. O horizonte capta a luz que houver por perto: laranja de postes, lilás na hora azul, um verde tênue sob a aurora em altas latitudes. Escolher essas cores como paradas separadas é o que distingue um céu noturno de um [degradê azul-marinho](https://gradiently.design/pt-br/guide/navy-gradient) genérico.

- Zênite: #020611
- Marinho profundo: #0b1a3a
- Azul-noite: #1e3a6e
- Azul do horizonte: #3b5b8f
- Brilho da cidade: #8a5a4a
- Luar: #f4f1e3

Uma paleta noturna funcional: quatro azuis de cima para baixo, um tom quente de horizonte e um branco de lua levemente creme, não branco puro.

## Códigos de degradê de céu noturno

Cada um vai de cima para baixo a 180 graus, então a cor mais escura fica no topo do quadro. Copie um como está ou troque a parada 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 urbano: `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 urbano um laranja de sódio, a noite polar um toque de verde-azulado, e o nascer da lua é iluminado por um ponto brilhante.

Repare que as paradas não são espaçadas por igual. A maior parte do quadro continua escura, e a mudança de cor acontece no quinto inferior, que é como um horizonte real se comporta. Espaçamento uniforme faz o céu parecer uma rampa em vez de uma cúpula. Para entender o raciocínio das paradas irregulares, veja [paradas de cor em degradês](https://gradiently.design/pt-br/guide/gradient-stops).

## Como acrescentar uma lua

Uma lua é um degradê radial com três partes: um pequeno disco de quase branco, uma queda rápida para azul claro e um halo longo e tênue que se dissolve no céu. Mantenha o disco pequeno, em torno de 3 a 5 por cento da largura do quadro. Uma lua grande e suave se lê como um holofote. Posicione-a fora do centro, alta num canto, para que nunca concorra com o título.

Lua sobre 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 claro em 4 por cento, e o halo se espalha até 14 por cento antes de o céu assumir.

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

## Como desenhar estrelas em CSS

Estrelas são pequenos degradês radiais: um ponto firme de branco que termina uma fração de pixel depois. Dê a cada camada de estrelas o seu próprio `background-size`, para que ela se repita em ritmo diferente. Ladrilhos de 200, 230, 290 e 170 pixels se repetem fora de compasso, então o olho nunca encontra a grade. Varie também a opacidade: 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 ladrilho 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 na tela do celular. Mantenha as estrelas esparsas perto do horizonte, onde a luz as apaga, e deixe algumas maiores carregarem a cena.

## Ideias de design com degradê de céu noturno

Céus noturnos combinam com eventos noturnos, lançamentos, marcas de sono e bem-estar, clubes de astronomia, lançamentos musicais e qualquer coisa que aconteça depois de escurecer. A metade superior escura é um lar natural para texto claro, e o horizonte mais brilhante dá ao olho um chão. Ponha o título no meio superior e mantenha a lua longe dele. Se as palavras cruzarem a faixa do horizonte, confira se ainda se leem: [texto sobre degradê](https://gradiently.design/pt-br/guide/text-on-gradient) cobre as regras de contraste.

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

Um post do 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 degradê azul meia-noite para um produto de sono

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

| Uso | Tamanho | Onde vai a luz |
| --- | --- | --- |
| Papel de parede de celular | Quadro de story 1080×1920 | Brilho do horizonte embaixo, abaixo do dock |
| Hero de site | 1920×1080 | Lua no alto à direita, título à esquerda |
| Post de evento | 1080×1350 | Brilho embaixo, palavras no alto |
| Capa de playlist | 1080×1080 | Lua pequena e fora do centro |
| Slides | 1920×1080 | Mantenha o céu escuro atrás do título |

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

## Como evitar faixas num degradê azul escuro

O azul escuro é onde o [banding em degradês](https://gradiently.design/pt-br/guide/gradient-banding) é mais visível, porque as telas têm poucos degraus distintos entre os quase pretos. Espalhe as paradas mais escuras por uma distância maior, acrescente uma camada de ruído fino com opacidade bem baixa e evite compressão JPEG pesada. Para paletas escuras mais profundas em geral, [fundos degradê escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) traz mais receitas, e [degradês de galáxia](https://gradiently.design/pt-br/guide/galaxy-gradient) levam o mesmo céu ao violeta e ao magenta.

Se você prefere não montar à mão o grão, a luz e a legibilidade, os Marks do Gradiently são fundos vivos que renderizam em cada tamanho em que você cria e se acalmam atrás das suas palavras. Busque no Mercado palavras de cor como “meia-noite” ou “azul-marinho profundo” e crie de graça com qualquer Mark ainda não reservado.

## FAQ

### Quais cores formam um degradê de céu noturno?

Comece com um marinho quase preto como `#020611` no topo, passe por `#0b1a3a` e `#1e3a6e` e termine com um azul mais claro como `#3b5b8f` no horizonte. Acrescente uma parada quente ou lilás bem embaixo para a luz da cidade ou a hora azul.

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

De cima para baixo a 180 graus, mais escuro no topo. O céu acima da cabeça é sempre mais escuro que o horizonte à noite.

### Como acrescento estrelas a um degradê CSS?

Sobreponha vários pontinhos 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 grade.

### Por que meu degradê azul escuro mostra listras?

Isso é banding: poucos degraus de cor numa grande área escura. Acrescente um pouco de grão, afaste mais as paradas escuras e exporte em PNG em vez de JPEG comprimido.

### Um degradê de céu noturno fica bom atrás de texto?

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