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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/galaxy-gradient)

Uma galáxia não é uma cor, é profundidade: um fundo escuro, nuvens de luz e pontos de branco espalhados por ele. Eis os códigos e as camadas que a tornam convincente.

## The short version

- Um gradiente de galáxia constrói-se com um fundo quase preto, uma ou duas nuvens suaves de cor de nebulosa e uma dispersão de pequenas estrelas.
- Os gradientes radiais servem as galáxias melhor do que os lineares, porque as nebulosas brilham para fora a partir de um centro luminoso.
- A maior parte de um fundo de galáxia deve ficar escura, com a cor a cobrir talvez um terço do enquadramento.
- Colocar duas cores de nebulosa bem afastadas evita o cinzento sujo que aparece onde matizes opostos se sobrepõem.
- Os gradientes muito escuros formam bandas com facilidade, por isso um fundo de galáxia precisa de uma camada de grão leve antes de exportar.

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.

- Espaço profundo: #03020a
- Índigo do vazio: #1a1240
- Violeta de nebulosa: #6d28d9
- Magenta cósmico: #c026d3
- Azul-petróleo profundo: #0e7490
- Azul-petróleo iónico: #2dd4bf
- Brasa: #fb923c
- Núcleo estelar: #fdf4e3

Uma paleta de galáxia. Escolhe o fundo, uma família de nebulosa e o núcleo estelar. Usar todas as cores ao mesmo tempo é como o espaço se transforma num arco-íris.

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

- Nebulosa violeta: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Nebulosa azul-petróleo: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Nebulosa de brasa: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Poeira cósmica rosa: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Núcleo de galáxia espiral: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Faixa da Via Láctea: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Seis gradientes de galáxia. O núcleo espiral usa uma elipse achatada, e a faixa da Via Láctea é uma risca luminosa num céu escuro.

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](https://gradiently.design/pt-pt/guide/night-sky-gradient) são mais suaves. Para cortinas de luz verde e violeta, vê os [gradientes de aurora](https://gradiently.design/pt-pt/guide/aurora-gradients).

## 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. **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. **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. **Acrescenta uma segunda nuvem, mais pequena** Um matiz diferente, longe do primeiro, com menor opacidade. Dá profundidade sem competir pela atenção.
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. **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.

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

Uma galáxia completa numa só regra. Como os mosaicos de estrelas têm 180, 260 e 420 píxeis, o padrão só se repete onde os três coincidem, o que é raro.

A sintaxe radial, incluindo tamanhos como `ellipse 60% 25%` e posições das paragens, está explicada em [gradiente radial em CSS](https://gradiently.design/pt-pt/guide/css-radial-gradient). Para a camada de grão, a [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture) 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](https://gradiently.design/pt-pt/guide/muddy-gradients).

### Parece sujo

- Violeta, azul-petróleo e laranja todos sobrepostos ao meio
- Cor a cobrir todo o enquadramento
- Um fundo cinzento neutro ou preto puro
- Estrelas numa grelha arrumada e visível
- Superfície digital lisa e limpa, com bandas

### Parece espaço profundo

- Uma nuvem principal e uma pequena companheira, bem afastadas
- Cor em cerca de um terço do enquadramento, o resto escuro
- Um fundo tingido de índigo ou azul
- Estrelas repetidas em tamanhos desiguais
- Grão fino sobre tudo

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

Design largo com fundo de espaço profundo, uma nuvem de cor a brilhar de um lado e as palavras Noite de estreia em branco

Um anúncio de transmissão em tamanho de miniatura do YouTube. As palavras ficam na metade escura; a cor vive do outro lado.

É 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

| Uso | Tamanho | Dica |
| --- | --- | --- |
| Ecrã offline da Twitch | 1920×1080 | Nebulosa de um lado, horário no lado escuro |
| Arte de canal do YouTube | 2560×1440 | Mantém o núcleo perto da zona de segurança central |
| Banner de servidor Discord | 960×540 | Só uma nuvem; é mostrado pequeno |
| Fundo de telemóvel | 1080×1920 | Põe a nebulosa em baixo, longe do relógio |
| Capa de álbum ou playlist | 1080×1080 | Um núcleo espiral ao meio funciona como símbolo |
| Cartaz de evento | A4 a 300 dpi, 2480×3508 | A impressão escurece os tons profundos, por isso eleva um pouco o fundo |

Os gradientes de galáxia estão em casa nos jogos, na música, na tecnologia e em tudo o que acontece à noite.

Os jogos e as transmissões em direto são o encaixe natural, e o [branding para streamers da Twitch](https://gradiently.design/pt-pt/guide/twitch-streamer-branding) 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](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds).

## FAQ

### Que cores tem um gradiente de galáxia?

Um fundo quase preto, como #03020a, uma cor de nebulosa, como o violeta #6d28d9, o magenta #c026d3 ou o azul-petróleo #2dd4bf, e um núcleo pálido perto do branco. A maior parte do enquadramento fica escura.

### Como faço um fundo de galáxia em CSS?

Empilha vários gradientes radiais em `background-image`: um fundo escuro, uma ou duas nuvens de nebulosa que se esbatem até transparente e pequenos pontos repetidos com valores diferentes de `background-size` para as estrelas.

### Porque é que o meu gradiente espacial parece sujo?

Cores opostas estão a sobrepor-se e há demasiado enquadramento colorido. Usa uma nuvem principal, mantém um segundo matiz longe dela e deixa o fundo escuro dominar.

### Que cor de letra funciona num fundo de galáxia?

Branco ou um lilás ou azul muito pálido, posto na parte escura do enquadramento e não sobre o núcleo luminoso da nebulosa.