A versão curta
- 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.
Nesta página
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 genérico.
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.
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.
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.
radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)Para combinar uma lua com um brilho de horizonte, sobrepõe o gradiente radial a um linear. O guia do gradiente radial 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.
.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 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 trata das regras de contraste.
Uma publicação de Instagram em 1080×1350, com as palavras no alto, na parte escura do céu.
Um Story em 1080×1920 para uma marca de sono. O enquadramento mais alto deixa mais céu por cima das palavras.
Tamanho
Onde fica a luz
Tamanho
Onde fica a luz
Tamanho
Onde fica a luz
Tamanho
Onde fica a luz
Tamanho
Onde fica a luz
Como evitar bandas num gradiente azul escuro
O azul escuro é onde as bandas num gradiente 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 tem mais receitas, e os gradientes de galáxia 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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil