# Gradientes aurora: luz suave, bem feita

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

Gradientes aurora tomam emprestado o visual da aurora boreal: véus luminosos de cor à deriva sobre a escuridão. São lindos, e escorregam rápido para o território do protetor de tela. Veja como mantê-los do lado certo.

## The short version

- Um gradiente aurora é um fundo escuro com poças ou véus suaves e muito desfocados de cor luminosa, inspirados na aurora boreal.
- Gradientes aurora funcionam porque cores claras sobre uma base quase preta parecem brilhar, como a luz de verdade à noite.
- As paletas aurora mais convincentes ficam perto das cores da aurora real: verdes, verde-azulados, violetas e um toque de rosa.
- Um gradiente aurora parece um protetor de tela quando usa cores saturadas demais, se move rápido demais ou preenche o quadro inteiro por igual.
- O texto sobre uma aurora pertence à área mais escura, com o véu mais brilhante longe das palavras.

Um **gradiente aurora** é um fundo de cor suave e luminosa flutuando sobre uma base escura, como a aurora boreal: véus de verde, verde-azulado e violeta que parecem brilhar, em vez de ficar sobre a superfície. Tecnicamente, é um conjunto de poças ou faixas de cor muito desfocadas sobre uma base quase preta, muitas vezes se movendo bem devagar. É um dos visuais mais atmosféricos que um gradiente pode ter, e um dos mais fáceis de exagerar.

## O que torna um gradiente aurora diferente

Três coisas separam uma aurora de um gradiente escuro comum. Primeiro, a base é muito escura, perto do preto, então qualquer cor sobre ela parece luz. Segundo, a cor vem em véus ou poças suaves e irregulares, e não numa rampa lisa de um lado ao outro. Terceiro, as bordas são extremamente desfocadas, então nada tem uma forma que dê para traçar. Juntas, elas criam a impressão de luz no ar, e não de tinta numa parede.

- Verde boreal: `radial-gradient(ellipse 80% 38% at 50% 32%, #6ee7b7 0%, #10b981 22%, #064e3b 48%, #020617 80%)`
- Véu violeta: `radial-gradient(ellipse 75% 40% at 40% 30%, #c4b5fd 0%, #7c3aed 25%, #2e1065 52%, #05030f 82%)`
- Turquesa ártico: `radial-gradient(ellipse 85% 35% at 60% 28%, #67e8f9 0%, #0891b2 25%, #083344 50%, #020617 80%)`
- Crepúsculo rosa: `radial-gradient(ellipse 80% 38% at 45% 30%, #fda4af 0%, #e11d48 22%, #4c0519 50%, #0a0206 80%)`

Esboços de aurora em camada única: uma elipse larga e achatada de luz no alto do quadro, se apagando até quase preto. Campos de aurora de verdade empilham várias delas.

## Paletas aurora que funcionam

A aurora real tira as cores de gases na alta atmosfera: o oxigênio dá o verde conhecido e, mais no alto, um vermelho profundo, enquanto o nitrogênio acrescenta azuis e roxos. Ficar perto dessa família é o que faz alguns gradientes aurora parecerem naturais e outros parecerem uma boate. Comece com um verde ou verde-azulado, acrescente um violeta e use rosa ou vermelho como um destaque raro.

- Noite polar: #030712
- Abeto profundo: #064e3b
- Verde aurora: #34d399
- Turquesa glacial: #22d3ee
- Violeta das alturas: #8b5cf6
- Rosa raro: #fb7185

Uma paleta aurora tirada da coisa real. O verde e o verde-azulado carregam o campo, o violeta dá profundidade e o rosa aparece só numa borda.

Você pode fugir da natureza, claro. Auroras quentes em âmbar e coral, ou monocromáticas num único azul, funcionam, desde que a base continue escura e as cores continuem vizinhas. Para saber mais sobre escolher cores que combinam, veja as [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors).

## Como evitar que uma aurora pareça um protetor de tela

### Protetor de tela

- Cinco ou mais cores totalmente saturadas
- Cor espalhada por igual de ponta a ponta
- Movimento rápido e em loop que dá para acompanhar
- Perfeitamente liso, com áreas escuras com banding visível
- Manchas centralizadas e simétricas

### Aurora bem feita

- Duas ou três cores relacionadas sobre quase preto
- A maior parte do quadro escura, luz numa região
- Movimento tão lento que só se nota numa segunda olhada
- Grão fino sobre as áreas escuras
- Véus que se inclinam e escapam por uma borda

A escuridão é o ingrediente mais importante. Uma aurora precisa de mais área escura do que iluminada, porque o brilho só se lê contra ela. Essa mesma escuridão é onde o banding aparece primeiro: rampas longas e sutis de verde-azulado escuro a preto ficam em degraus visíveis na maioria das telas. Um grão fino resolve, como explicam o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) e os [fundos de gradiente escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds).

## Como construir um gradiente aurora em CSS

A técnica usual são alguns gradientes radiais em forma de elipses largas e achatadas, desfocados juntos numa camada maior que o conteúdo, atrás dele. Desfocar um pseudoelemento custa mais que um gradiente simples, então mantenha poucas camadas e a animação lenta, e pare o movimento para quem prefere movimento reduzido.

```css
.aurora {
  position: relative;
  overflow: hidden;
  background: #030712;
}

.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 22% at 30% 30%, #34d399cc, transparent 70%),
    radial-gradient(ellipse 35% 20% at 62% 26%, #22d3eeaa, transparent 70%),
    radial-gradient(ellipse 30% 18% at 52% 48%, #8b5cf699, transparent 70%);
  filter: blur(40px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}

.aurora > * {
  position: relative; /* keep content above the light */
}

@keyframes aurora-drift {
  to { transform: translate3d(4%, -3%, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}
```

Três véus desfocados sobre uma base quase preta, à deriva durante 30 segundos. O inset negativo esconde as bordas suaves que o desfoque cria.

Para saber mais sobre animar gradientes com suavidade, veja os [fundos de gradiente animados](https://gradiently.design/pt-br/guide/animated-gradient-background). Para respeitar as preferências de movimento, veja [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion).

## Tipografia sobre uma aurora

Fundos aurora são generosos com a tipografia, porque a maior parte do quadro é escura. Coloque texto claro na região mais escura e mantenha o véu mais brilhante bem longe das palavras. O erro é centralizar o brilho e o título juntos, de modo que as letras fiquem na única área de menor contraste.

Um pôster de evento em que a parte brilhante de um gradiente aurora fica atrás do título

Luz e palavras competem quando o brilho passa bem atrás do título.

O mesmo pôster de evento com a área mais escura do gradiente atrás do título

Com a base escura atrás das palavras, a aurora as emoldura em vez de competir.

## Onde os gradientes aurora combinam

- Marcas de música, sono, meditação e bem-estar, onde uma luz calma combina com o produto
- Eventos noturnos, planetários, astronomia e viagens para o norte
- Lançamentos de tecnologia que querem atmosfera sem neon
- Papéis de parede e telas de bloqueio; veja [papel de parede em gradiente](https://gradiently.design/pt-br/guide/gradient-wallpaper)
- Fundos em vídeo em loop, onde a deriva lenta é o objetivo todo

Combina menos onde as pessoas precisam ler muito ou comparar números. Painéis, tabelas de preços e artigos longos pedem uma superfície silenciosa e uniforme, e um brilho à deriva atrás deles vira distração. Também briga com marcas claras e diurnas: uma padaria ou uma loja de brinquedos infantis ficaria estranha envolta em noite polar. Nesses casos, tome emprestada só a suavidade, como um único brilho pálido sobre uma base clara.

> **Uma aurora por tela** Uma aurora é um clima, não um padrão. Use uma vez, como pano de fundo de um hero, de uma capa ou de um story, e deixe o resto da página calmo. Repetida em cada card, ela deixa de parecer luz e começa a parecer decoração.

Como uma aurora depende de movimento lento, ela rende mais como loop do que parada. No Gradiently, os designs feitos com um Mark que você reservou são exportados como loops contínuos de 5 a 30 segundos, com o movimento e o ritmo que você escolher.

## FAQ

### O que é um gradiente aurora?

Um gradiente aurora é um fundo escuro com véus ou poças suaves e desfocados de cor luminosa, inspirado na aurora boreal.

### Quais cores são melhores para um gradiente aurora?

Verdes, verde-azulados e violetas sobre uma base quase preta parecem mais naturais, com rosa ou vermelho como destaque raro. Fique com duas ou três cores.

### Como faço um gradiente aurora em CSS?

Empilhe algumas elipses largas e achatadas de `radial-gradient` num pseudoelemento, desfoque com `filter: blur()`, coloque sobre um fundo quase preto e anime devagar.

### Por que o meu gradiente aurora tem listras?

Rampas escuras longas e sutis mostram banding na maioria das telas. Acrescente grão fino sobre as áreas escuras e evite compressão pesada.

### Onde o texto deve ficar num gradiente aurora?

Na área mais escura, longe do véu mais brilhante, para que o texto claro tenha o máximo de contraste.