Orbes de gradiente: esferas luminosas para heros e capas

Um orbe de gradiente é uma esfera luminosa feita com um gradiente radial: um núcleo brilhante, uma faixa de cor saturada e um esbatido longo até um fundo escuro. Tornou-se um favorito em páginas de lançamento de produtos, heros de apps, capas de podcasts e de álbuns, porque uma só forma dá ao design um ponto focal, profundidade e uma sensação de energia sem uma única fotografia. A receita é curta. O que separa um orbe marcante de uma mancha desfocada é o fundo atrás dele, a cor do núcleo e o sítio onde o colocas.

Três tipos de orbe de gradiente

• Orbe de brilho suave: sem aresta nenhuma, só luz a desabrochar do escuro. Calmo, atmosférico, bom atrás de layouts grandes.
• Esfera iluminada: uma aresta redonda nítida com um realce de um lado, a ler-se como um planeta ou uma bola de vidro. Ousado e gráfico. As regras de iluminação estão em formas em gradiente.
• Anel de eclipse: um disco escuro com luz a derramar-se à volta do rebordo. Dramático, noturno, popular em música e tecnologia.

Receitas de orbes de gradiente

Cada receita é um único radial-gradient() que podes colar em CSS ou numa ferramenta de design. A primeira paragem é o núcleo, as do meio são o corpo colorido e a última é o fundo. Empurrar a paragem do fundo mais para fora alarga o brilho.

Evita um núcleo de branco puro. Um branco tingido com a cor do próprio orbe, como #faf5ff num orbe violeta, mantém o centro luminoso sem parecer queimado. Evita também um fundo de preto puro: um quase preto com um traço do matiz do orbe faz o brilho parecer pertencer ao espaço.

Porque é que os orbes precisam de um fundo escuro

O brilho é contraste. Numa página branca, o mesmo orbe violeta parece uma nódoa negra; sobre um fundo de tinta profunda, parece luz. Se a tua marca vive em fundos claros, usa um orbe pastel pálido com uma queda suave e larga e aceita que se vai ler como uma flor de cor e não como um brilho. Fundos de gradiente escuros tem fundos que combinam bem com todos os orbes acima.

Onde colocar um orbe de gradiente

Um orbe é a coisa mais brilhante do enquadramento, por isso puxa o olhar antes de tudo o resto. É uma dádiva se o título estiver ao lado e um problema se estiver por cima. Põe o orbe no alto e para um lado, corta-o na margem se for grande e mantém as palavras num fundo calmo e escuro. Nunca uses um orbe como brilho atrás de texto: baixa o contraste exatamente onde mais precisas dele.

Um hero com orbe de gradiente em CSS

O método mais simples é uma camada de gradiente radial na própria secção. Para um brilho mais suave e orgânico, usa um elemento circular separado com um desfoque forte, o que também te permite animá-lo devagar sem repintar a secção toda.

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}

Animar um orbe de gradiente

Um orbe que deriva uns pontos percentuais pelo enquadramento, ou respira ficando ligeiramente maior e menor, parece vivo sem distrair das palavras. Mantém o ciclo longo, entre 10 e 20 segundos, e suaviza a entrada e a saída para o movimento nunca parecer começar ou parar. Nos formatos sociais, exporta-o como um loop curto cujo último fotograma coincide com o primeiro: vídeo em loop perfeito explica como. Na web, move o elemento desfocado com transform e desliga o movimento para os visitantes que pedem movimento reduzido.

Como fazer um orbe de gradiente parecer original

O orbe é agora comum o bastante para um orbe predefinido parecer um modelo. Uma segunda luz, mais ténue, uma mudança de matiz na queda ou uma camada de grão aproximam-no de algo reconhecível. Os Marks do Gradiently vão mais longe: cada um é um fundo vivo com a sua própria luz, materiais e movimento, verificado para que não haja dois iguais, e renderiza-se em todos os tamanhos em que desenhas. Explora Marks escuros no Mercado e desenha de graça com qualquer um que esteja livre.