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

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 genérico.

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.

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.

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.

Para combinar uma lua com um brilho de horizonte, sobreponha o degradê radial a um linear. O guia de degradê radial 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.

.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%;
}

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ê cobre as regras de contraste.

Como evitar faixas num degradê azul escuro

O azul escuro é onde o banding em degradês é 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 traz mais receitas, e degradês de galáxia 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.