# Formas em gradiente: blobs, orbes e esferas que parecem reais

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

Um blob com gradiente é fácil. Um blob que parece ter peso, pousado na luz, é outra coisa. A diferença está em cinco pequenas decisões sobre de onde vem a luz.

## The short version

- Formas em gradiente parecem tridimensionais quando todas as formas do design são sombreadas a partir da mesma fonte de luz imaginária.
- Uma esfera convincente tem cinco zonas: um brilho, um lado iluminado, uma sombra própria, uma faixa de luz refletida perto da borda e uma sombra projetada embaixo.
- No CSS, uma esfera é um elemento circular com um gradiente radial cujo centro é deslocado em direção à luz, por exemplo `circle at 30% 30%`.
- Blobs e formas orgânicas podem ser feitos com valores irregulares de `border-radius` e sombreados 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, não cinza nem preto.

**Formas em gradiente** são blobs, orbes, esferas e pílulas preenchidos com uma mistura que as faz parecer iluminadas, como se tivessem volume. Elas parecem reais quando o sombreamento segue uma única fonte de luz: um brilho forte no lado voltado para a luz, uma sombra própria mais escura do lado oposto, um contorno fraco de luz refletida bem na borda e uma sombra suave no chão. Pule qualquer uma dessas e a forma vira um adesivo chapado com gradiente. Acerte todas e duas cores bastam para sugerir um objeto sólido.

## Como a luz cai numa forma redonda

Os pintores descrevem isso há séculos, e vale para toda forma redonda que você desenha. Escolha a direção da luz antes de escolher a cor e depois sombreie cada zona em ordem. Superior esquerdo é a convenção porque é o que o leitor espera, mas qualquer direção funciona se você for consistente.

| Zona | Onde fica | Cor |
| --- | --- | --- |
| Brilho | O ponto mais próximo da luz | Quase branco, tingido com a cor da luz |
| Lado iluminado | A metade voltada para a luz | A cor real da forma, no ponto mais claro |
| Sombra própria | Onde a superfície se afasta da luz | A faixa mais escura, um pouco mais fria |
| Luz refletida | Um contorno fino na borda sombreada | Um pouco mais clara que a sombra própria |
| Sombra projetada | Na superfície embaixo | Suave, escura, mais escura onde toca |

As cinco zonas de uma esfera iluminada. O contorno refletido é o mais esquecido, e é ele que convence da redondeza.

## Receitas de sombreamento para copiar

Estas amostras são estudos de luz: o sombreamento que você colocaria dentro de um círculo, um cilindro ou um cone. Cada uma é iluminada pelo canto superior esquerdo. Aplique numa forma de cantos arredondados e ela vira um objeto sólido.

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

Repare no leve clareamento no fim de cada esfera e cilindro: é a luz refletida na borda sombreada.

As receitas de esfera terminam numa cor um pouco mais clara que a anterior. Essa última parada é o contorno refletido, colocado logo dentro da borda do círculo para sobreviver ao recorte. Sem ela, a borda da forma morre e ela parece um buraco em vez de uma bola. O guia de [gradiente radial](https://gradiently.design/pt-br/guide/radial-gradient) explica como a posição e o tamanho do centro mudam a queda.

## Como fazer uma esfera em gradiente no CSS

Transforme o elemento num círculo com `border-radius: 50%` e desloque o centro do gradiente em direção à luz. O círculo recorta o gradiente, então o brilho fica fora do centro dentro de uma forma perfeitamente redonda. Uma elipse achatada e desfocada embaixo cria 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 irregulares de border radius.

> **Blobs que respiram** Anime 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 crível. Respeite as configurações de [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion).

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

Blobs passam uma sensação amigável e suave, e por isso são populares em marcas de bem-estar, comida, público infantil e criatividade. Eles seguem as mesmas regras de luz de uma esfera, mas suas saliências pegam brilho em mais de um lugar. Mantenha um brilho principal e deixe os outros fracos. Mais sobre o estilo em si está em [formas orgânicas no design](https://gradiently.design/pt-br/guide/organic-shapes-design).

- **Pílula:** um retângulo arredondado sombreado como um cilindro, com a luz correndo pelo comprimento.
- **Seixo:** uma esfera achatada, com brilho amplo e de baixo contraste, como pedra fosca.
- **Gota:** uma esfera com brilho forte e nítido e um contorno refletido marcado, que parece lustrosa.
- **Blob nuvem:** círculos sobrepostos com um único brilho em comum, para que pareçam uma só forma.

## Por que formas em gradiente parecem chapadas, e como corrigir

### Parece chapada

- Brilho bem no centro, como se a luz viesse de quem olha
- Cada forma iluminada de um lado diferente
- Sombras cinzas ou pretas
- Borda dura entre claro e escuro
- Sem sombra projetada, então as formas flutuam

### Parece sólida

- Brilho empurrado em direção a uma fonte de luz
- Todas as formas compartilham a mesma luz
- Sombras num tom mais profundo e mais frio da cor
- Uma passagem longa e gradual até a sombra própria
- Uma sombra suave ancora cada forma numa superfície

A temperatura da cor faz boa parte do trabalho. Luz quente dá sombras frias e luz fria dá sombras quentes. Uma esfera violeta com um brilho levemente rosado e uma sombra própria azul-violeta parece muito mais real do que uma que só vai do violeta claro ao violeta escuro. [Cores quentes e frias](https://gradiently.design/pt-br/guide/warm-and-cool-colors) explica a combinação.

## Como usar formas em gradiente num layout

1. **Escolha uma fonte de luz** Anote: superior esquerda, quente. Toda forma, sombra e brilho segue essa luz.
2. **Use três tamanhos** Uma forma grande, uma média e uma pequena dão profundidade. Cinco blobs iguais parecem confete.
3. **Deixe as formas saírem do quadro** Cortar a maior forma numa borda faz a tela parecer maior do que seus limites.
4. **Guarde uma área calma para o texto** Formas são movimentadas. Coloque-as em volta do título, nunca atrás dele.
5. **Adicione granulado** Uma camada fina de ruído faz o sombreamento digital liso parecer impresso e esconde as faixas. Veja [gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients).

Um post vertical de produto anunciando novos sabores de sorvete com formas arredondadas em gradiente em volta do título

Um post de produto em 1080×1350. Formas arredondadas e iluminadas em volta do texto, com o título sobre um fundo calmo.

Se você prefere não sombrear formas à mão, os Marks do Gradiently são fundos vivos feitos de camadas de materiais, luz e granulado, e renderizam de forma limpa em qualquer tamanho em que você criar. Para uma única esfera luminosa usada como imagem principal, veja [orbes em gradiente](https://gradiently.design/pt-br/guide/gradient-orb).

## FAQ

### Como fazer uma forma em gradiente parecer 3D?

Sombreie a partir de uma fonte de luz: um brilho no lado iluminado, uma sombra própria mais escura do lado oposto, um contorno um pouco mais claro na borda sombreada e uma sombra projetada suave embaixo.

### Como fazer uma esfera com gradiente CSS?

Dê ao elemento `border-radius: 50%` e um `radial-gradient(circle at 30% 30%, ...)` que vai do quase branco à cor principal e a um tom escuro. Deslocar o centro em direção à luz coloca o brilho fora do centro.

### Como fazer uma forma de blob no CSS?

Use oito valores irregulares de `border-radius`, como `62% 38% 46% 54% / 55% 42% 58% 45%`, e preencha com um gradiente radial.

### De que cor deve ser a sombra de uma forma em gradiente?

Uma versão mais escura e um pouco mais fria da própria cor da forma. Sombras cinzas ou pretas deixam formas coloridas com aspecto sujo.