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

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

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

## The short version

- Um degradê galáxia é feito de um fundo quase preto, uma ou duas nuvens suaves de cor de nebulosa e um punhado de estrelas pequenas.
- Degradês radiais combinam mais com galáxias do que os lineares, porque as nebulosas brilham de dentro para fora a partir de um centro claro.
- A maior parte de um fundo de galáxia deve continuar escura, com a cor cobrindo talvez um terço do quadro.
- Colocar duas cores de nebulosa bem afastadas evita o cinza barrento que aparece onde matizes opostos se sobrepõem.
- Degradês muito escuros formam faixas com facilidade, então um fundo de galáxia precisa de uma leve camada de granulação antes de exportar.

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.

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

Uma paleta de galáxia. Escolha o fundo, uma família de nebulosa e o núcleo estelar. Usar todas as cores de uma vez é como o espaço vira arco-íris.

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

- Nebulosa violeta: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Nebulosa turquesa: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Nebulosa 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 degradês galáxia. O núcleo espiral usa uma elipse achatada, e a faixa da Via Láctea é uma listra clara atravessando o céu escuro.

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

## 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. **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. **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. **Acrescente uma segunda nuvem, menor** Um matiz diferente, longe do primeiro, com opacidade menor. Ela dá profundidade sem disputar atenção.
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. **Finalize com granulação** Uma camada sutil de ruído sobre tudo esconde as faixas nas áreas escuras e dá um ar 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 regra. Como os blocos de estrelas têm 180, 260 e 420 pixels, o padrão só se repete onde os três se alinham, o que é raro.

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

### Fica barrento

- Violeta, turquesa e laranja se sobrepondo no meio
- Cor cobrindo o quadro inteiro
- Um fundo cinza neutro ou preto puro
- Estrelas numa grade certinha e visível
- Superfície digital lisa e limpa, com faixas

### Parece espaço profundo

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

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

Um design largo com fundo de espaço profundo, uma nuvem de cor brilhando de um lado e as palavras Noite de estreia em branco

O anúncio de uma live no tamanho de thumbnail do YouTube. As palavras ficam na metade escura; a cor vive do outro lado.

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

| Uso | Tamanho | Dica |
| --- | --- | --- |
| Tela offline da Twitch | 1920×1080 | Nebulosa de um lado, agenda no lado escuro |
| Arte do canal do YouTube | 2560×1440 | Mantenha o núcleo perto da área segura central |
| Banner de servidor do Discord | 960×540 | Uma nuvem só; ele aparece pequeno |
| Papel de parede do celular | 1080×1920 | Coloque a nebulosa embaixo, longe do relógio |
| Capa de álbum ou playlist | 1080×1080 | Um núcleo espiral no meio funciona como símbolo |
| Cartaz de evento | A4 a 300 dpi, 2480×3508 | A impressão escurece os tons profundos, então clareie um pouco o fundo |

Degradês galáxia ficam em casa em games, música, tecnologia e tudo o que acontece à noite.

Games e streaming são o encaixe natural, e [branding para streamer da Twitch](https://gradiently.design/pt-br/guide/twitch-streamer-branding) mostra como manter um visual em painéis, banners e overlays. Para mais fundos escuros que brilham, leia [fundos degradê escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds).

## FAQ

### Quais cores formam um degradê galáxia?

Um fundo quase preto como #03020a, uma cor de nebulosa como violeta #6d28d9, magenta #c026d3 ou turquesa #2dd4bf e um núcleo pálido quase branco. A maior parte do quadro continua escura.

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

Empilhe vários degradês radiais em `background-image`: um fundo escuro, uma ou duas nuvens de nebulosa que se apagam até transparente e pontinhos repetidos com valores diferentes de `background-size` para as estrelas.

### Por que meu degradê espacial parece barrento?

Cores opostas estão se sobrepondo e uma parte grande demais do quadro está colorida. Use uma nuvem principal, mantenha um segundo matiz bem longe dela e deixe o fundo escuro dominar.

### Qual cor de fonte funciona sobre um fundo de galáxia?

Branco ou um lilás ou azul muito claro, na parte escura do quadro, não sobre o núcleo brilhante da nebulosa.