Degradê galáxia: códigos cósmicos sobre o espaço profundo

Um degradê galáxia é cor suave de nebulosa brilhando a partir de um fundo quase preto: nuvens violeta, magenta, turquesa ou cor de brasa que se dissolvem no espaço profundo, geralmente com uma poeira de estrelas minúsculas por cima. O segredo é a proporção. Fotografias reais do espaço são quase todas escuras, e a cor vive em uma ou duas nuvens, não espalhada pelo quadro inteiro. Abaixo estão códigos para copiar das principais famílias de nebulosas e um céu estrelado completo em camadas, em CSS.

O que faz um degradê parecer uma galáxia

Uma mistura de roxo para azul é só um degradê roxo. Ele começa a parecer espaço quando tem as quatro coisas que o seu olho espera das imagens astronômicas:

• Um fundo quase preto, levemente tingido de azul ou violeta em vez de neutro.
• Nuvens de nebulosa que brilham a partir de um núcleo claro e se apagam de forma irregular, trabalho para degradês radiais.
• Um núcleo mais claro dentro da nuvem mais brilhante: um rosa pálido, lilás ou creme quase branco.
• Estrelas: muitos pontinhos brancos e azul-claros, alguns um pouco maiores, espalhados sem padrão.

Códigos de degradê galáxia

Cada um destes é um único degradê radial que você pode colar numa ferramenta de design ou numa folha de estilo. Eles pesam de propósito para o lado escuro. O violeta é o degradê espacial clássico; o turquesa parece mais frio e científico; o de brasa lembra uma estrela morrendo ou um pôster de ficção científica.

Se você quer algo mais perto de casa, um céu com estrelas e lua em vez do espaço profundo, os códigos de degradê céu noturno são mais suaves. Para cortinas de luz verde e violeta, veja degradês aurora.

Monte um fundo de galáxia em CSS, camada por camada

Um único degradê dá uma nebulosa. Uma galáxia vem de empilhar vários, e o CSS faz isso bem porque background-image aceita uma lista. A primeira camada da lista é pintada por cima.

1. 1

   Pinte o fundo

   Um degradê radial amplo, de índigo do vazio no meio para espaço profundo nas bordas, para o quadro nunca parecer chapado.

2. 2

   Acrescente uma nebulosa principal

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

3. 3

   Acrescente uma segunda nuvem, menor

   Um matiz diferente, longe do primeiro, com opacidade menor. Ela dá profundidade sem disputar atenção.

4. 4

   Espalhe as estrelas

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

5. 5

   Finalize com granulação

   Uma camada sutil de ruído sobre tudo esconde as faixas nas áreas escuras e dá um ar 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 de parada, está em CSS radial gradient. Para a camada de granulação, textura de ruído em CSS traz uma abordagem com filtro SVG para copiar.

Como evitar que um degradê galáxia fique barrento

A falha mais comum é uma galáxia que parece um hematoma: cores se sobrepondo em marrom ou cinza, e cor espalhada de forma tão uniforme que nada brilha. O brilho precisa de escuridão em volta. A solução quase sempre é menos cor, colocada com mais cuidado. A teoria das cores por trás disso está em degradês barrentos.

Colocar palavras sobre um fundo de galáxia

Fundos de galáxia combinam com texto branco ou muito claro, e combinam melhor na parte escura do quadro, não sobre o núcleo brilhante da nebulosa. Coloque o título no espaço vazio e deixe a nuvem de lado. Estrelas atrás de texto pequeno são um problema real: parecem pontos finais perdidos. Mantenha a área atrás do texto corrido livre das estrelas maiores, ou tire as estrelas dessa região de vez.

Esse é o tipo de equilíbrio que o Gradiently resolve sozinho. Um Mark sabe onde estão as suas palavras, move sua região mais calma e de melhor contraste para trás delas e suaviza os detalhes agitados perto das letras, então um fundo cósmico nunca engole o título. Os Marks também podem ter movimento lento, o que combina mais com uma galáxia do que qualquer imagem parada.

Onde os degradês galáxia funcionam melhor

Games e streaming são o encaixe natural, e branding para streamer da Twitch mostra como manter um visual em painéis, banners e overlays. Para mais fundos escuros que brilham, leia fundos degradê escuros.