# Formas em gradiente: blobs, orbes e esferas com aspeto real

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

Uma mancha com um gradiente é fácil. Uma mancha que parece ter peso, assente na luz, é outra coisa. A diferença são cinco pequenas decisões sobre de onde vem a luz.

## The short version

- As formas em gradiente parecem tridimensionais quando todas as formas do design são sombreadas a partir da mesma fonte de luz imaginada.
- Uma esfera convincente tem cinco zonas: um realce, um lado iluminado, uma sombra de núcleo, uma faixa de luz refletida perto da margem e uma sombra projetada por baixo.
- Em CSS, uma esfera é um elemento circular com um gradiente radial cujo centro é deslocado para a luz, por exemplo `circle at 30% 30%`.
- Os blobs e as formas orgânicas fazem-se com valores de `border-radius` desiguais e sombreiam-se com o mesmo gradiente radial de uma esfera.
- As sombras devem ser uma versão mais escura e mais fria da própria cor da forma, e não cinzento ou preto.

As **formas em gradiente** são blobs, orbes, esferas e pílulas preenchidos com uma mistura que os faz parecer iluminados, como se tivessem volume. Parecem reais quando o sombreado segue uma só fonte de luz: um realce brilhante no lado virado para a luz, uma sombra de núcleo mais escura do lado oposto, um ténue rebordo de luz refletida mesmo na margem e uma sombra suave no chão. Salta qualquer uma destas e a forma lê-se como um autocolante plano com um gradiente. Acerta nelas e duas cores bastam para sugerir um objeto sólido.

## Como a luz cai numa forma redonda

Os pintores descrevem isto há séculos, e aplica-se a toda a forma redonda que desenhares. Escolhe a direção da luz antes de escolheres a cor e depois sombreia cada zona por ordem. Em cima à esquerda é a convenção porque os leitores a esperam, mas qualquer direção serve se fores consistente.

| Zona | Onde fica | Cor |
| --- | --- | --- |
| Realce | O ponto mais próximo da luz | Quase branco, tingido com a cor da luz |
| Lado iluminado | A metade virada para a luz | A cor verdadeira da forma, no seu mais brilhante |
| Sombra de núcleo | Onde a superfície se afasta | A faixa mais escura, ligeiramente mais fria |
| Luz refletida | Um rebordo fino na margem na sombra | Um pouco mais clara do que a sombra de núcleo |
| Sombra projetada | Na superfície por baixo | Suave, escura, mais escura onde toca |

As cinco zonas de uma esfera iluminada. O rebordo refletido é o que mais vezes se esquece, e o que vende a redondeza.

## Receitas de sombreado para copiares

Estas amostras são estudos de luz: o sombreado que colocarias dentro de um círculo, um cilindro ou um cone. Cada uma é iluminada em cima à esquerda. Aplica-as a uma forma de cantos arredondados e tornam-se objetos sólidos.

- Sombreado de esfera, violeta: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Sombreado de esfera, âmbar: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Sombreado de cilindro, turquesa: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Sombreado de cone, índigo: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Repara na ligeira subida no fim de cada esfera e cilindro: é a luz refletida na margem sombreada.

As receitas de esfera terminam numa cor um pouco mais clara do que a anterior. Essa última paragem é o rebordo refletido, colocado mesmo dentro da margem do círculo para sobreviver ao recorte. Sem ele, a margem da forma fica morta e parece um buraco em vez de uma bola. O guia de [gradientes radiais](https://gradiently.design/pt-pt/guide/radial-gradient) explica como a posição do centro e o tamanho mudam a queda.

## Como fazer uma esfera em gradiente com CSS

Faz do elemento um círculo com `border-radius: 50%` e depois desloca o centro do gradiente para a luz. O círculo recorta o gradiente, por isso o realce fica fora do centro dentro de uma forma perfeitamente redonda. Uma elipse desfocada e achatada por baixo dá a sombra projetada.

```css
.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}
```

Uma esfera violeta com sombra projetada suave e um blob âmbar feito com oito valores de border-radius desiguais.

> **Blobs que respiram** Anima os oito valores de `border-radius` entre dois conjuntos ao longo de 8 a 12 segundos com entrada e saída suaves. A forma ondula devagar enquanto a iluminação fica parada, o que a mantém credível. Respeita as definições de [movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion).

## Blobs, pílulas e formas orgânicas

Os blobs leem-se como simpáticos e suaves, e é por isso que são populares em marcas de bem-estar, comida, infantis e criativas. Seguem as mesmas regras de iluminação de uma esfera, mas as suas protuberâncias apanham realces em mais do que um sítio. Mantém um realce principal e deixa os outros ténues. Há mais sobre o estilo em [formas orgânicas em design](https://gradiently.design/pt-pt/guide/organic-shapes-design).

- **Pílula:** um retângulo arredondado sombreado como um cilindro, com a luz a correr ao longo do comprimento.
- **Seixo:** uma esfera achatada, realce largo e de baixo contraste, como pedra mate.
- **Gota:** uma esfera com um realce brilhante e nítido e um rebordo refletido forte, a ler-se como brilhante.
- **Blob de nuvem:** círculos sobrepostos com um realce partilhado, para se lerem como uma só forma.

## Porque é que as formas em gradiente parecem planas, e como corrigir

### Parece plano

- Realce no centro exato, como se fosse iluminado a partir de quem vê
- Cada forma iluminada de um lado diferente
- Sombras cinzentas ou pretas
- Aresta dura entre luz e escuro
- Sem sombra projetada, por isso as formas flutuam

### Parece sólido

- Realce empurrado para uma só fonte de luz
- Todas as formas partilham a mesma luz
- Sombras que são um tom mais profundo e frio da cor
- Uma transição longa e gradual para a sombra de núcleo
- Uma sombra suave ancora cada forma a uma superfície

A temperatura de cor faz boa parte do trabalho. A luz quente dá sombras frias e a luz fria dá sombras quentes. Uma esfera violeta com um realce ligeiramente rosa e uma sombra de núcleo violeta-azulada parece muito mais real do que uma que simplesmente vai de violeta claro a violeta escuro. [Cores quentes e frias](https://gradiently.design/pt-pt/guide/warm-and-cool-colors) explica o par.

## Usar formas em gradiente num layout

1. **Escolhe uma só fonte de luz** Escreve-a: em cima à esquerda, quente. Todas as formas, sombras e realces seguem-na.
2. **Usa três tamanhos** Uma forma grande, uma média e uma pequena lê-se como profundidade. Cinco blobs iguais leem-se como confetis.
3. **Deixa as formas sair do enquadramento** Cortar a maior forma na margem faz a tela parecer maior do que os seus limites.
4. **Mantém uma zona calma para as palavras** As formas são movimentadas. Põe-nas à volta do título, nunca atrás dele.
5. **Acrescenta grão** Uma camada fina de ruído faz o sombreado digital liso parecer impresso e esconde o banding. Vê [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients).

Uma publicação vertical de produto a anunciar novos sabores de gelado, com formas suaves e arredondadas em gradiente à volta do título

Uma publicação de produto a 1080×1350. Formas arredondadas e iluminadas à volta das palavras, com o título em fundo calmo.

Se preferires não sombrear formas à mão, os Marks do Gradiently são fundos vivos feitos de materiais empilhados, luz e grão, e renderizam-se de forma limpa em todos os tamanhos em que desenhas. Para uma só esfera luminosa usada como imagem de hero, vê [orbes de gradiente](https://gradiently.design/pt-pt/guide/gradient-orb).

## FAQ

### Como faço uma forma em gradiente parecer 3D?

Sombreia-a a partir de uma só fonte de luz: um realce no lado iluminado, uma sombra de núcleo mais escura do lado oposto, um rebordo ligeiramente mais claro na margem sombreada e uma sombra projetada suave por baixo.

### Como se faz uma esfera com um gradiente CSS?

Dá a um elemento `border-radius: 50%` e um `radial-gradient(circle at 30% 30%, ...)` que vá de quase branco à cor principal e a um tom escuro. Deslocar o centro para a luz põe o realce fora do centro.

### Como faço uma forma de blob em CSS?

Usa oito valores de `border-radius` desiguais, como `62% 38% 46% 54% / 55% 42% 58% 45%`, e preenche-a com um gradiente radial.

### Que cor deve ter a sombra de uma forma em gradiente?

Uma versão mais escura e ligeiramente mais fria da própria cor da forma. Sombras cinzentas ou pretas fazem as formas coloridas parecerem sujas.