# Forme sfumate: blob, sfere e orbi che sembrano reali

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

Un blob con un gradiente è facile. Un blob che sembra avere peso, immerso nella luce, è un’altra cosa. La differenza sta in cinque piccole scelte su da dove arriva la luce.

## The short version

- Le forme sfumate sembrano tridimensionali quando ogni forma del design è ombreggiata dalla stessa fonte di luce immaginata.
- Una sfera convincente ha cinque zone: un riflesso, un lato illuminato, un’ombra interna, una fascia di luce riflessa vicino al bordo e un’ombra proiettata sotto.
- In CSS una sfera è un elemento circolare con un gradiente radiale il cui centro è spostato verso la luce, per esempio `circle at 30% 30%`.
- Blob e forme organiche si ottengono con valori di `border-radius` irregolari e si ombreggiano con lo stesso gradiente radiale di una sfera.
- Le ombre devono essere una versione più scura e più fredda del colore della forma, non grigie o nere.

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.

| Zona | Dove si trova | Colore |
| --- | --- | --- |
| Riflesso | Il punto più vicino alla luce | Quasi bianco, tinto del colore della luce |
| Lato illuminato | La metà rivolta alla luce | Il vero colore della forma, al massimo della luminosità |
| Ombra interna | Dove la superficie si volta altrove | La fascia più scura, un po’ più fredda |
| Luce riflessa | Un bordo sottile sul margine in ombra | Un po’ più chiara dell’ombra interna |
| Ombra proiettata | Sulla superficie sotto | Morbida, scura, più scura dove tocca |

Le cinque zone di una sfera illuminata. Il bordo riflesso è quello che più spesso si dimentica, ed è quello che vende la rotondità.

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

- Ombreggiatura di sfera, viola: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Ombreggiatura di sfera, ambra: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Ombreggiatura di cilindro, verde acqua: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Ombreggiatura di cono, indaco: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Cerca il leggero rialzo alla fine di ogni sfera e cilindro: è la luce riflessa sul margine in ombra.

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](https://gradiently.design/it/guide/radial-gradient) 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.

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

Una sfera viola con una morbida ombra proiettata e un blob ambra fatto di otto valori irregolari di border-radius.

> **Blob che respirano** Anima gli otto valori di `border-radius` tra due serie in da 8 a 12 secondi con un’andatura in entrata e uscita. La forma ondeggia lentamente mentre la sua luce resta ferma, e così resta credibile. Rispetta le impostazioni di [movimento ridotto](https://gradiently.design/it/guide/reduced-motion).

## 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](https://gradiently.design/it/guide/organic-shapes-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

### Sembra piatto

- Riflesso al centro esatto, come illuminato dallo spettatore
- Ogni forma illuminata da un lato diverso
- Ombre grigie o nere
- Bordo netto tra luce e buio
- Nessuna ombra proiettata, quindi le forme fluttuano

### Sembra solido

- Riflesso spinto verso un’unica fonte di luce
- Ogni forma condivide la stessa luce
- Ombre che sono una tonalità più profonda e più fredda del colore
- Un passaggio lungo e graduale verso l’ombra interna
- Un’ombra morbida ancora ogni forma a una superficie

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](https://gradiently.design/it/guide/warm-and-cool-colors) spiega l’abbinamento.

## Usare le forme sfumate in un layout

1. **Scegli una sola fonte di luce** Scrivila: in alto a sinistra, calda. Ogni forma, ombra e riflesso la segue.
2. **Usa tre misure** Una forma grande, una media e una piccola danno profondità. Cinque blob uguali sembrano coriandoli.
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. **Tieni un’area calma per le parole** Le forme sono affollate. Mettile attorno al titolo, mai dietro.
5. **Aggiungi grana** Uno strato di rumore fine fa sembrare stampata l’ombreggiatura digitale liscia e nasconde le bande. Vedi [i gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients).

Un post verticale di prodotto che annuncia nuovi gusti di gelato con morbide forme tonde sfumate attorno al titolo

Un post prodotto a 1080×1350. Forme tonde e illuminate attorno alle parole, con il titolo su un fondo calmo.

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](https://gradiently.design/it/guide/gradient-orb).

## FAQ

### Come faccio sembrare 3D una forma sfumata?

Ombreggiala da un’unica fonte di luce: un riflesso sul lato illuminato, un’ombra interna più scura sul lato opposto, un bordo un po’ più chiaro sul margine in ombra e un’ombra proiettata morbida sotto.

### Come si fa una sfera con un gradiente CSS?

Dai a un elemento `border-radius: 50%` e un `radial-gradient(circle at 30% 30%, ...)` che va da quasi bianco al colore principale a una tonalità scura. Spostare il centro verso la luce mette il riflesso fuori centro.

### Come si fa un blob in CSS?

Usa otto valori `border-radius` irregolari, come `62% 38% 46% 54% / 55% 42% 58% 45%`, e riempilo con un gradiente radiale.

### Di che colore deve essere l’ombra su una forma sfumata?

Una versione più scura e un po’ più fredda del colore della forma. Le ombre grigie o nere fanno sembrare sporche le forme colorate.