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

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.

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.

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

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

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.

• 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

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 explica a combinação.

Como usar formas em gradiente num layout

1. 1

   Escolha uma fonte de luz

   Anote: superior esquerda, quente. Toda forma, sombra e brilho segue essa luz.

2. 2

   Use três tamanhos

   Uma forma grande, uma média e uma pequena dão profundidade. Cinco blobs iguais parecem confete.

3. 3

   Deixe as formas saírem do quadro

   Cortar a maior forma numa borda faz a tela parecer maior do que seus limites.

4. 4

   Guarde uma área calma para o texto

   Formas são movimentadas. Coloque-as em volta do título, nunca atrás dele.

5. 5

   Adicione granulado

   Uma camada fina de ruído faz o sombreamento digital liso parecer impresso e esconde as faixas. Veja gradientes granulados.

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.