Gradientes de aurora: luz suave, bem feita

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.

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.

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.

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

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 e fundos de gradiente escuros.

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.

.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; }
}

Para mais sobre animar gradientes com suavidade, vê os fundos de gradiente animados. Para respeitar as preferências de movimento, vê o movimento reduzido.

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.

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

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.