Gradiente de galáxia: códigos cósmicos sobre espaço profundo

Um gradiente de galáxia é cor suave de nebulosa a brilhar num fundo quase preto: nuvens violeta, magenta, azul-petróleo ou cor de brasa que se esbatem no espaço profundo, normalmente com um pó de estrelas minúsculas por cima. O segredo é a proporção. As fotografias reais do espaço são sobretudo escuras, e a cor vive numa ou duas nuvens e não em todo o enquadramento. Aqui ficam códigos copiáveis para as principais famílias de nebulosas e um céu estrelado completo, em camadas, em CSS.

O que faz um gradiente parecer uma galáxia

Uma mistura de roxo para azul é apenas um gradiente roxo. Começa a ler-se como espaço quando tem as quatro coisas que o olho espera das imagens de astronomia:

• Um fundo quase preto, ligeiramente tingido de azul ou violeta em vez de neutro.
• Nuvens de nebulosa que brilham a partir de um núcleo luminoso e se desvanecem de forma irregular, trabalho para gradientes radiais.
• Um núcleo mais claro dentro da nuvem mais brilhante: um rosa pálido, lilás ou um creme quase branco.
• Estrelas: muitos pontos minúsculos de branco e azul-pálido, algumas ligeiramente maiores, espalhadas sem padrão.

Códigos de gradiente de galáxia

Cada um destes é um só gradiente radial que podes colar numa ferramenta de design ou numa folha de estilos. Estão propositadamente inclinados para o lado escuro. O violeta é o clássico gradiente espacial; o azul-petróleo parece mais frio e científico; a brasa parece uma estrela moribunda ou um cartaz de ficção científica.

Se queres algo mais próximo de casa, um céu com estrelas e uma lua em vez do espaço profundo, os códigos do gradiente de céu noturno são mais suaves. Para cortinas de luz verde e violeta, vê os gradientes de aurora.

Constrói um fundo de galáxia em CSS, camada a camada

Um só gradiente dá-te uma nebulosa. Uma galáxia nasce de empilhar vários, o que o CSS faz bem porque background-image aceita uma lista. A primeira camada da lista é pintada por cima.

1. 1

   Assenta o fundo

   Um gradiente radial largo, do índigo do vazio ao meio ao espaço profundo nas margens, para que o enquadramento nunca pareça plano.

2. 2

   Acrescenta uma nebulosa principal

   Um gradiente radial colorido que se esbate até transparent, posto fora do centro, mais ou menos onde se cruzaria uma linha dos terços.

3. 3

   Acrescenta uma segunda nuvem, mais pequena

   Um matiz diferente, longe do primeiro, com menor opacidade. Dá profundidade sem competir pela atenção.

4. 4

   Espalha as estrelas

   Pequenos pontos radiais repetidos em dois ou três tamanhos diferentes, para que as repetições nunca se alinhem numa grelha visível.

5. 5

   Termina com grão

   Uma camada ténue de ruído por cima de tudo esconde as bandas nas zonas escuras e dá um aspeto fotográfico.

.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}

A sintaxe radial, incluindo tamanhos como ellipse 60% 25% e posições das paragens, está explicada em gradiente radial em CSS. Para a camada de grão, a textura de ruído em CSS tem uma abordagem copiável com filtro SVG.

Evitar que um gradiente de galáxia fique sujo

A falha mais comum é uma galáxia que parece um hematoma: cores a sobrepor-se em castanho ou cinzento, e cor tão espalhada por igual que nada brilha. O brilho precisa de escuridão à volta. A correção é quase sempre menos cor, colocada com mais cuidado. A teoria da cor por trás disto está nos gradientes sujos.

Pôr palavras num fundo de galáxia

Os fundos de galáxia servem letra branca ou muito pálida, e servem-na melhor na parte escura do enquadramento, não sobre o núcleo luminoso da nebulosa. Põe o título no espaço vazio e deixa a nuvem de lado. As estrelas por trás de texto pequeno são um problema real: parecem pontos finais soltos. Mantém a zona por trás do texto corrente livre das estrelas maiores, ou deixa as estrelas fora dessa região por completo.

É este o tipo de equilíbrio que o Gradiently gere sozinho. Um Mark sabe onde estão as tuas palavras, desloca a sua zona mais calma e de melhor contraste para trás delas e suaviza o pormenor agitado junto às letras, para que um fundo cósmico nunca engula o título. Os Marks também podem ter movimento lento, que serve uma galáxia melhor do que qualquer imagem fixa.

Onde os gradientes de galáxia funcionam melhor

Os jogos e as transmissões em direto são o encaixe natural, e o branding para streamers da Twitch mostra como manter um só aspeto em painéis, banners e sobreposições. Para mais fundos escuros que brilham, lê os fundos de gradiente escuro.