# Orbes em gradiente: esferas luminosas para heros e capas

[Canonical HTML page](https://gradiently.design/pt-br/guide/gradient-orb)

Uma única esfera luminosa sobre um fundo escuro pode sustentar uma landing page inteira ou uma capa de álbum. Parece fácil, e é fácil errar. Aqui estão as receitas e as regras de posicionamento.

## The short version

- Um orbe em gradiente é uma esfera luminosa feita com um gradiente radial, geralmente um núcleo claro que passa por uma cor saturada e se apaga num fundo escuro.
- Os orbes têm três estilos comuns: um brilho suave sem borda, uma esfera iluminada com borda nítida e um anel de eclipse com centro escuro.
- Um orbe só brilha de forma convincente sobre um fundo escuro ou de cor profunda, porque brilho é contraste com o entorno.
- Posicione o orbe longe do título, geralmente no alto e de um lado, e deixe o texto sobre o fundo calmo.
- No CSS, um orbe é uma camada de gradiente radial ou um elemento circular desfocado posicionado atrás do conteúdo.

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](https://gradiently.design/pt-br/guide/gradient-shapes).
- **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.

- Brilho violeta: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Brilho ciano: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Brilho de brasa: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Brilho esmeralda: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Anel de eclipse: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Brilho iridescente: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Seis orbes sobre fundos escuros. O iridescente muda de matiz enquanto se apaga, de rosa para violeta e azul, o que lembra uma superfície brilhante.

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](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) traz fundos que combinam com cada orbe acima.

- Fundo tinta violeta: #0b0a1a
- Fundo tinta marinho: #020617
- Fundo tinta vermelho: #0c0507
- Fundo tinta verde: #010805

Quatro quase pretos, cada um puxado para um orbe. Combine o fundo com o orbe e o brilho parece natural.

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

- Hero de site 1920×1080: 1920 × 1080
- Post do Instagram 1080×1350: 1080 × 1350
- Capa de playlist 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

Num hero largo, coloque o orbe no lado oposto ao título. Em formatos altos, coloque-o no terço superior com o texto abaixo.

Uma capa quadrada de podcast com uma luz violeta brilhando no alto do quadro e o título do programa abaixo, sobre fundo escuro

Uma capa de podcast em 3000×3000. A luz fica acima do título, nunca embaixo.

Um banner largo de lançamento de produto com o título à esquerda e uma área clara e luminosa à direita

Um hero de lançamento em 1920×1080, com o texto à esquerda e a área mais clara à direita.

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

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

Um orbe violeta no canto superior direito sobre fundo de tinta, com uma luz ciano fraca entrando pelo canto inferior esquerdo. O conteúdo fica acima dos dois.

> **Desfoques grandes têm um custo** Um `filter: blur()` grande num elemento em movimento pode derrubar quadros em celulares mais antigos. Anime só o `transform`, mantenha o raio de desfoque moderado e leia [desempenho de gradientes CSS](https://gradiently.design/pt-br/guide/css-gradient-performance) antes de publicar.

## 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](https://gradiently.design/pt-br/guide/seamless-loop-video) explica como. Na web, mova o elemento desfocado com `transform` e desligue o movimento para quem pede [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion).

## Como deixar um orbe em gradiente original

### Orbe genérico

- Roxo para azul, centralizado, sobre preto
- Núcleo branco puro que estoura
- Colocado atrás do título
- Perfeitamente liso, com faixas na transição

### Orbe pensado

- Uma cor da marca com mudança de matiz na transição
- Um núcleo tingido que continua luminoso
- Deslocado, cortado, com o texto sobre fundo calmo
- Granulado fino sobre a transição para mantê-la suave

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](https://gradiently.design/pt-br/guide/grainy-gradients) 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.

## FAQ

### Como fazer um orbe em gradiente?

Use um gradiente radial com núcleo branco tingido, uma faixa de cor saturada e um fundo escuro, por exemplo `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Qual fundo funciona melhor atrás de um orbe em gradiente?

Um quase preto puxado para a cor do orbe. O brilho só parece brilho contra um entorno escuro.

### Posso colocar texto sobre um orbe em gradiente?

Evite. O orbe é a parte mais clara do quadro, então o texto sobre ele perde contraste. Coloque o orbe de um lado e deixe o texto sobre um fundo calmo.

### Como fazer um orbe desfocado no CSS?

Crie um elemento circular com um gradiente radial que se apaga até transparente e aplique `filter: blur()`. Posicione-o de forma absoluta atrás do conteúdo.