Gradientes de céu: códigos de amanhecer, meio-dia, entardecer e 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.

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.

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.

Para mais azuis além do céu, do marinho ao gelo, veja os códigos do gradiente azul. Se quiser também a água sob o céu, o artigo do gradiente oceano 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.

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 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.

Que céu combina com que design

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 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.

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.

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.

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

Para ângulos, posições dos pontos e alternativas, veja o gradiente linear em CSS.