Orbes em gradiente: esferas luminosas para heros e capas

Um orbe em gradiente é uma esfera luminosa feita com um gradiente radial: um núcleo claro, uma faixa de cor saturada e uma longa transição para um fundo escuro. Virou um dos favoritos para páginas de lançamento de produto, heros de apps, artes de podcast e capas de álbum, porque uma única forma dá ao design um ponto focal, profundidade e energia sem nenhuma foto. A receita é curta. O que separa um orbe marcante de uma mancha borrada é o fundo atrás dele, a cor do núcleo e onde você o coloca.

Três tipos de orbe em gradiente

• Orbe de brilho suave: nenhuma borda, só luz florescendo no escuro. Calmo, atmosférico, bom atrás de layouts grandes.
• Esfera iluminada: uma borda redonda nítida com um reflexo de um lado, que lembra 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 vazando pela borda. Dramático, noturno, popular em música e tecnologia.

Receitas de orbe em gradiente

Cada receita é um único radial-gradient() que você pode colar no CSS ou numa ferramenta de design. A primeira parada é o núcleo, as do meio são o corpo colorido e a última é o fundo. Afastar a parada do fundo deixa o brilho mais largo.

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

Por que orbes precisam de fundo escuro

Brilho é contraste. Numa página branca, o mesmo orbe violeta parece um hematoma; sobre um fundo de tinta profunda, parece luz. Se a sua marca vive em fundos claros, use um orbe pastel pálido com uma transição suave e larga, e aceite que ele vai parecer um florescer de cor, não um brilho. Fundos em gradiente escuro traz fundos que combinam com cada orbe acima.

Onde posicionar um orbe em gradiente

O orbe é a coisa mais clara do quadro, então atrai o olhar antes de tudo. Isso é ótimo se o título está ao lado dele e um problema se o título está em cima dele. Coloque o orbe no alto e de um lado, corte-o na borda se for grande e deixe o texto sobre um fundo escuro e calmo. Nunca use um orbe como brilho atrás do texto: ele reduz o contraste justamente onde você mais precisa.

Um hero com orbe em gradiente no CSS

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

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

Como animar um orbe em gradiente

Um orbe que desliza alguns por cento pelo quadro, ou que respira ficando um pouco maior e menor, parece vivo sem tirar a atenção do texto. Mantenha o ciclo longo, entre 10 e 20 segundos, com entrada e saída suaves para que o movimento nunca pareça começar ou parar. Em formatos sociais, exporte como um loop curto cujo último quadro seja igual ao primeiro: vídeo em loop contínuo explica como. Na web, mova o elemento desfocado com transform e desligue o movimento para quem pede movimento reduzido.

Como deixar um orbe em gradiente original

O orbe ficou tão comum que um orbe padrão parece template. Uma segunda luz mais fraca, uma mudança de matiz na transição ou uma camada de granulado o levam para algo reconhecível. Os Marks do Gradiently vão além: cada um é um fundo vivo com luz, materiais e movimento próprios, conferido para que dois nunca sejam iguais, e renderiza em qualquer tamanho em que você criar. Explore Marks escuros no Mercado e crie de graça com qualquer um que ainda não foi reservado.