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

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.

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.

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

.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

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.

• 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

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 explica o par.

Usar formas em gradiente num layout

1. 1

   Escolhe uma só fonte de luz

   Escreve-a: em cima à esquerda, quente. Todas as formas, sombras e realces seguem-na.

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

   Deixa as formas sair do enquadramento

   Cortar a maior forma na margem faz a tela parecer maior do que os seus limites.

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

   Acrescenta grão

   Uma camada fina de ruído faz o sombreado digital liso parecer impresso e esconde o banding. Vê gradientes granulados.

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.