Gradientes aurora: luz suave, bem feita

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.

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.

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.

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

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

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.

.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 saber mais sobre animar gradientes com suavidade, veja os fundos de gradiente animados. Para respeitar as preferências de movimento, veja movimento reduzido.

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.

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

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.