Forme sfumate: blob, sfere e orbi che sembrano reali

Le forme sfumate sono blob, orbi, sfere e pillole riempiti con una sfumatura che le fa sembrare illuminate, come se avessero volume. Sembrano reali quando l’ombreggiatura segue una sola fonte di luce: un riflesso luminoso sul lato rivolto alla luce, un’ombra interna più scura sul lato opposto, un debole bordo di luce riflessa proprio al margine e un’ombra morbida sul piano. Salta una qualsiasi di queste cose e la forma sembra un adesivo piatto con un gradiente. Falle bene e due colori bastano a suggerire un oggetto solido.

Come la luce cade su una forma tonda

I pittori lo descrivono da secoli, e vale per ogni forma tonda che disegni. Scegli una direzione della luce prima di scegliere un colore, poi ombreggia ogni zona in ordine. In alto a sinistra è la convenzione perché i lettori se l’aspettano, ma qualsiasi direzione va bene se resti coerente.

Ricette di ombreggiatura da copiare

Questi campioni sono studi di luce: l’ombreggiatura che metteresti dentro un cerchio, un cilindro o un cono. Ognuno è illuminato da in alto a sinistra. Applicali a una forma con angoli arrotondati e diventano oggetti solidi.

Le ricette per le sfere terminano con un colore un po’ più chiaro del precedente. Quell’ultimo punto è il bordo riflesso, posto appena dentro il margine del cerchio perché sopravviva al ritaglio. Senza, il bordo della forma muore e sembra un buco più che una palla. La guida al gradiente radiale spiega come posizione e misura del centro cambiano la caduta.

Come fare una sfera sfumata in CSS

Rendi l’elemento un cerchio con border-radius: 50%, poi sposta il centro del gradiente verso la luce. Il cerchio ritaglia il gradiente, così il riflesso sta fuori centro dentro una forma perfettamente tonda. Un’ellisse sfocata e schiacciata sotto dà l’ombra proiettata.

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

Blob, pillole e forme organiche

I blob sembrano amichevoli e morbidi, ed è per questo che piacciono a benessere, cibo, brand per bambini e creativi. Seguono le stesse regole di luce di una sfera, ma le loro sporgenze catturano riflessi in più punti. Tieni un riflesso principale e lascia gli altri tenui. Altro sullo stile in sé è nelle forme organiche nel design.

• Pillola: un rettangolo arrotondato ombreggiato come un cilindro, con la luce lungo la sua lunghezza.
• Ciottolo: una sfera schiacciata, con riflesso ampio e poco contrasto, come pietra opaca.
• Goccia: una sfera con un riflesso netto e luminoso e un forte bordo riflesso, che sembra lucida.
• Blob nuvola: cerchi sovrapposti con un riflesso condiviso, così si leggono come un’unica forma.

Perché le forme sfumate sembrano piatte, e come correggerle

La temperatura del colore fa gran parte del lavoro. La luce calda dà ombre fredde e la luce fredda ombre calde. Una sfera viola sotto un riflesso leggermente rosa con un’ombra interna blu-viola sembra molto più reale di una che passa semplicemente da viola chiaro a viola scuro. I colori caldi e freddi spiega l’abbinamento.

Usare le forme sfumate in un layout

1. 1

   Scegli una sola fonte di luce

   Scrivila: in alto a sinistra, calda. Ogni forma, ombra e riflesso la segue.

2. 2

   Usa tre misure

   Una forma grande, una media e una piccola danno profondità. Cinque blob uguali sembrano coriandoli.

3. 3

   Lascia che le forme escano dall’inquadratura

   Tagliare la forma più grande su un bordo fa sembrare la tela più grande dei suoi confini.

4. 4

   Tieni un’area calma per le parole

   Le forme sono affollate. Mettile attorno al titolo, mai dietro.

5. 5

   Aggiungi grana

   Uno strato di rumore fine fa sembrare stampata l’ombreggiatura digitale liscia e nasconde le bande. Vedi i gradienti granulosi.

Se preferisci non ombreggiare le forme a mano, i Mark di Gradiently sono sfondi vivi costruiti con materiali sovrapposti, luce e grana, e si renderizzano in modo pulito a ogni misura in cui progetti. Per una singola sfera luminosa usata come immagine principale, vedi gli orbi sfumati.