# Gradientes de aurora: luz suave, bem feita

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

Os gradientes de aurora tomam de empréstimo o visual das luzes do norte: véus luminosos de cor a deslizar sobre a escuridão. São lindos e resvalam depressa para o território do protetor de ecrã. Eis como os manter do lado certo.

## The short version

- Um gradiente de aurora é um fundo escuro com manchas ou véus suaves e muito desfocados de cor luminosa, inspirados nas luzes do norte.
- Os gradientes de aurora funcionam porque as cores claras sobre uma base quase preta parecem brilhar, como a luz verdadeira à noite.
- As paletas de aurora mais convincentes ficam perto das cores da aurora verdadeira: verdes, verdes-azulados, violetas e um toque de rosa.
- Um gradiente de aurora parece um protetor de ecrã quando usa demasiadas cores saturadas, se move depressa demais ou preenche o enquadramento por igual.
- O texto sobre uma aurora pertence à zona mais escura, mantendo o véu mais brilhante longe das palavras.

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

## O que distingue um gradiente de aurora

Três coisas separam uma aurora de um gradiente escuro vulgar. Primeiro, a base é muito escura, quase preta, por isso qualquer cor sobre ela se lê como luz. Segundo, a cor surge em véus ou manchas suaves e irregulares e não numa rampa lisa de um lado ao outro. Terceiro, os bordos são extremamente desfocados, por isso nada tem uma forma que se possa traçar. Juntas, criam a impressão de luz no ar e não de tinta numa parede.

- Verde nórdico: `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%)`
- Verde-azulado á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 de uma só camada: uma elipse larga e plana de luz no alto do enquadramento, a esbater-se em quase preto. Os campos de aurora verdadeiros sobrepõem várias destas.

## Paletas de aurora que funcionam

A aurora verdadeira recebe as cores de gases da alta atmosfera: o oxigénio dá o verde familiar e, mais acima, um vermelho profundo, enquanto o azoto acrescenta azuis e roxos. Ficar perto dessa família é a razão de alguns gradientes de aurora parecerem naturais e outros parecerem uma discoteca. Começa com um verde ou verde-azulado, junta um violeta e usa rosa ou vermelho como destaque raro.

- Noite polar: #030712
- Abeto profundo: #064e3b
- Verde aurora: #34d399
- Verde-azulado glaciar: #22d3ee
- Violeta superior: #8b5cf6
- Rosa raro: #fb7185

Uma paleta de aurora tirada da coisa verdadeira. O verde e o verde-azulado carregam o campo, o violeta dá profundidade e o rosa aparece só num bordo.

Podes afastar-te da natureza, claro. As auroras quentes em âmbar e coral, ou as monocromáticas num só azul, funcionam ambas, desde que a base continue escura e as cores continuem vizinhas. Para mais sobre escolher cores que combinam, vê as [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors).

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

### Protetor de ecrã

- Cinco ou mais cores totalmente saturadas
- Cor espalhada por igual de borda a borda
- Movimento rápido e em loop que dá para seguir
- Zonas escuras perfeitamente lisas, com bandas visíveis
- Manchas centradas e simétricas

### Aurora bem feita

- Duas ou três cores relacionadas sobre quase preto
- A maior parte do enquadramento escura, luz numa só zona
- Movimento tão lento que só se nota à segunda vista
- Grão fino sobre as zonas escuras
- Véus que se inclinam e derivam para fora de um bordo

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 as bandas aparecem primeiro: as rampas longas e subtis do verde-azulado escuro ao preto dão degraus visíveis na maioria dos ecrãs. Um grão fino resolve-o, como se explica em [bandas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) e [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds).

## Como criar um gradiente de aurora em CSS

A técnica habitual são alguns gradientes radiais com a forma de elipses largas e planas, desfocados em conjunto numa camada maior por trás do conteúdo. Desfocar um pseudo-elemento custa mais do que um gradiente simples, por isso mantém baixo o número de camadas e lenta a animação, e pára 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, a derivar ao longo de 30 segundos. O inset negativo esconde os bordos suaves que o desfoque cria.

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

## Texto sobre uma aurora

Os fundos de aurora são generosos com a tipografia, porque a maior parte do enquadramento é escura. Põe letra clara na zona mais escura e mantém o véu mais brilhante bem longe das palavras. O erro é centrar o brilho e o título juntos, para que as letras fiquem na única zona com menos contraste.

Um cartaz de evento em que a parte brilhante de um gradiente de aurora fica por trás do título

A luz e as palavras competem quando o brilho passa mesmo por trás do título.

O mesmo cartaz de evento com a zona mais escura do gradiente por trás do título

Com a base escura por trás das palavras, a aurora enquadra-as em vez de competir.

## Onde encaixam os gradientes de aurora

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

Encaixa pior onde as pessoas precisam de ler muito ou de comparar números. Os painéis, as tabelas de preços e os artigos longos pedem uma superfície calma e uniforme, e um brilho à deriva por trás deles torna-se uma distração. Também luta com marcas luminosas e diurnas: uma padaria ou uma loja de brinquedos ficam estranhas embrulhadas em noite polar. Nesses casos, toma de empréstimo apenas a suavidade, como um único brilho pálido sobre uma base clara.

> **Uma aurora por ecrã** Uma aurora é um ambiente, não um padrão. Usa-a uma só vez, como pano de fundo de um cabeçalho, de uma capa ou de um story, e deixa o resto da página calmo. Repetida em cada cartão, deixa de parecer luz e passa a parecer decoração.

Como uma aurora depende do movimento lento, fica melhor como loop do que como imagem estática. Na Gradiently, os designs feitos com um Mark que reservaste exportam-se como loops contínuos de 5 a 30 segundos, com o movimento e o ritmo que escolheres.

## FAQ

### O que é um gradiente de aurora?

Um gradiente de aurora é um fundo escuro com véus ou manchas suaves e desfocados de cor luminosa, inspirado nas luzes do norte.

### Que cores são melhores para um gradiente de aurora?

Verdes, verdes-azulados e violetas sobre uma base quase preta parecem os mais naturais, com rosa ou vermelho como destaque raro. Fica-te por duas ou três cores.

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

Empilha algumas elipses largas e planas de `radial-gradient` num pseudo-elemento, desfoca-o com `filter: blur()`, coloca-o sobre um fundo quase preto e anima-o devagar.

### Porque é que o meu gradiente de aurora tem riscas?

As rampas escuras longas e subtis mostram bandas na maioria dos ecrãs. Acrescenta grão fino sobre as zonas escuras e evita a compressão pesada.

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

Na zona mais escura, longe do véu mais brilhante, para que a letra clara tenha mais contraste.