# Orbes de gradiente: esferas luminosas para heros e capas

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

Uma só esfera luminosa sobre um fundo escuro pode sustentar uma página inteira ou a capa de um álbum. Parece fácil e é fácil de errar. Aqui ficam as receitas e as regras de colocação.

## The short version

- Um orbe de gradiente é uma esfera luminosa feita de um gradiente radial, normalmente um núcleo brilhante que se esbate por uma cor saturada até um fundo escuro.
- Os orbes têm três estilos comuns: um brilho suave sem aresta, uma esfera iluminada com aresta nítida e um anel de eclipse com o centro escuro.
- Um orbe só brilha de forma convincente sobre um fundo escuro ou de cor profunda, porque o brilho é contraste com o que o rodeia.
- Coloca o orbe longe do título, normalmente no alto e para um lado, e deixa as palavras assentar no fundo calmo.
- Em CSS, um orbe é uma camada de gradiente radial ou um elemento circular desfocado posicionado atrás do conteúdo.

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

- 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 ao esbater-se, de rosa a violeta e a azul, o que se lê como uma superfície brilhante.

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](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) tem fundos que combinam bem com todos os orbes acima.

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

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

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

- Hero de website 1920×1080: 1920 × 1080
- Publicação Instagram 1080×1350: 1080 × 1350
- Capa de playlist 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

Num hero largo, põe o orbe do lado oposto ao título. Em formatos altos, põe-no no terço de cima, com as palavras por baixo.

Uma capa quadrada de podcast com uma luz violeta brilhante no alto do enquadramento e o título do programa por baixo, sobre fundo escuro

Uma capa de podcast a 3000×3000. A luz fica acima do título, nunca por baixo.

Um banner largo de lançamento de produto com o título à esquerda e uma zona brilhante e luminosa à direita

Um hero de lançamento a 1920×1080, com as palavras à esquerda e a zona mais brilhante à direita.

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

```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 em cima à direita sobre um fundo de tinta, com uma luz ciano ténue a infiltrar-se em baixo à esquerda. O conteúdo fica por cima de ambos.

> **Desfoques grandes têm custo** Um `filter: blur()` grande num elemento em movimento pode perder fotogramas em telemóveis mais antigos. Anima só o `transform`, mantém o raio do desfoque modesto e lê [desempenho de gradientes CSS](https://gradiently.design/pt-pt/guide/css-gradient-performance) antes de publicares.

## 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](https://gradiently.design/pt-pt/guide/seamless-loop-video) explica como. Na web, move o elemento desfocado com `transform` e desliga o movimento para os visitantes que pedem [movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion).

## Como fazer um orbe de gradiente parecer original

### Orbe genérico

- Roxo a azul, centrado, sobre preto
- Núcleo de branco puro que queima
- Colocado atrás do título
- Perfeitamente liso, com banding no esbatido

### Orbe pensado

- Uma cor de marca com mudança de matiz na queda
- Um núcleo tingido que se mantém luminoso
- Deslocado, cortado, com as palavras sobre fundo calmo
- Grão fino sobre o esbatido para o manter suave

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

## FAQ

### Como faço um orbe de gradiente?

Usa um gradiente radial com um núcleo de 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%)`.

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

Um quase preto tingido na cor do orbe. O brilho só se lê como brilho contra um redor escuro.

### Posso pôr texto por cima de um orbe de gradiente?

Evita. O orbe é a parte mais brilhante do enquadramento, por isso o texto por cima perde contraste. Põe o orbe para um lado e mantém as palavras sobre fundo calmo.

### Como faço um orbe desfocado em CSS?

Cria um elemento circular com um gradiente radial que se esbate até ficar transparente e aplica `filter: blur()`. Posiciona-o em absoluto atrás do conteúdo.