# Forme organiche nel design: blob, curve e forme morbide

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

Blob, ciottoli, archi e curve morbide rendono un design umano e calmo. Ecco dove funzionano, come disegnarne uno che sembri voluto e come incorniciare le foto con loro.

## The short version

- Le forme organiche sono forme irregolari e fluide come blob, ciottoli, foglie e increspature, in contrasto con le forme geometriche come quadrati e cerchi.
- Rendono i design più morbidi, più umani e più naturali, e vanno bene per brand di benessere, cibo, bellezza, infanzia e lifestyle.
- Un buon blob ha poche curve ampie di dimensioni diverse, senza punte aguzze né minuscole ondulazioni.
- Le cornici a blob e ad arco trasformano foto comuni in immagini di marca senza bisogno di saper ritoccare.
- In CSS un blob semplice si ottiene con un border-radius a otto valori, e si anima cambiando quei valori lentamente.

Le **forme organiche** sono forme irregolari e fluide: blob, ciottoli, foglie, pozzanghere, increspature e archi morbidi. A differenza delle forme geometriche, che seguono regole (un quadrato ha quattro lati uguali), sembrano cresciute o versate. Nel design portano morbidezza e calore, e sono particolarmente utili come cornici per foto, forme di sfondo e contenitori per testi brevi. Il trucco è farle sembrare scelte e non casuali.

## Forme organiche e forme geometriche

Le forme geometriche sembrano precise, costruite e razionali. Quelle organiche sembrano naturali, rilassate e umane. Nessuna è migliore: dicono cose diverse. Molte buone identità le usano entrambe: una rigorosa griglia di [design geometrico](https://gradiently.design/it/guide/geometric-design) per testi e impaginazione, con una sola forma organica per dare calore.

### Geometriche

- Quadrati, cerchi, triangoli, linee rette
- Danno un’idea di precisione, tecnica, ordine
- Vanno bene per finanza, ingegneria, architettura
- Facili da allineare e ripetere

### Organiche

- Blob, ciottoli, foglie, onde, archi
- Danno un’idea di calma, naturalezza, accoglienza
- Vanno bene per benessere, cibo, bellezza, famiglia
- Vogliono cura, perché non sembrino casuali

## Dove le forme organiche funzionano meglio

| Uso | Cosa fa | Adatto a |
| --- | --- | --- |
| Cornice per foto | Ritaglia una foto a blob o ad arco | Ritratti, prodotti, cibo |
| Forma di sfondo | Una grande forma morbida dietro al soggetto | Foto di prodotto, immagini hero |
| Contenitore di testo | Un ciottolo con un prezzo o una frase breve | Offerte, etichette, adesivi |
| Divisore di sezione | Un bordo ondulato tra le aree di una pagina | Siti web, menu, volantini |
| Pattern | Tanti piccoli ciottoli o foglie ripetuti | Packaging, carte da parati, carta da regalo |

Cinque compiti che le forme organiche svolgono bene. Sceglierne uno o due per design, non tutti e cinque.

Centri benessere, etichette di cosmesi, panetterie, fioristi, terapeuti e brand per l’infanzia si appoggiano a queste forme perché ammorbidiscono tutto ciò che hanno intorno. Il [design del brand di cosmesi](https://gradiently.design/it/guide/skincare-brand-design) è un buon esempio della categoria, in cui un solo ciottolo dietro a un flacone può reggere tutto l’aspetto.

## Come disegnare un blob che sembri voluto

1. **Parti da un cerchio o da un quadrato arrotondato** Un blob è un cerchio che è stato spinto. Partire da una forma tonda mantiene equilibrata la massa complessiva.
2. **Spingi tre o quattro punti** Sposta alcuni punti del bordo verso l’interno e l’esterno di quantità diverse. Da tre a cinque rigonfiamenti è il punto ideale; di più sembra una macchia.
3. **Varia la dimensione delle curve** Una curva lunga e dolce, una più stretta, una intermedia. Rigonfiamenti uguali sembrano meccanici, come un fiore o un ingranaggio.
4. **Elimina punte aguzze e minuscole ondulazioni** Ogni curva deve essere abbastanza liscia da poterla seguire lentamente con un dito. Le piccole pieghe da lontano sembrano errori.
5. **Riusalo** Salva il tuo blob migliore e usa lo stesso, ruotato o scalato, in tutto il brand. Una forma riconoscibile diventa parte dell’identità.

Tieni i blob grandi e pochi. Una sola forma che riempie un terzo del quadro sembra sicura di sé; dieci blob piccoli sembrano una decorazione aggiunta all’ultimo minuto.

> **Colora il blob con discrezione** Riempi i blob di sfondo con un tono vicino al fondo, uno o due gradini più chiaro o più scuro, invece di un colore forte a contrasto. La forma resta visibile, ma l’attenzione va alla foto o al titolo che le sta davanti.

## Cornici organiche per foto: blob e archi

Ritagliare una foto in una forma morbida è il modo più semplice per far sembrare progettate delle immagini comuni. Un arco dà un’aria architettonica e calma, un cerchio è personale, un blob è rilassato e amichevole. Usa sempre la stessa forma di cornice, così una griglia di post si legge come una serie.

- Le cornici **ad arco** vanno bene per interni, ceramiche, matrimoni e tutto ciò che deve sembrare sereno.
- Le cornici **tonde** vanno bene per i volti: pagine del team, testimonianze, schede dei relatori.
- Le cornici **a blob** vanno bene per cibo, piante, animali e prodotti dal profilo irregolare.
- Lascia calmo lo sfondo intorno alla cornice, perché la forma resti leggibile.

Lo Studio di Gradiently può ritagliare qualsiasi foto in un arco, un cerchio o un blob, e tingerla con i colori del Mark di sfondo in mono, duotone o come velatura morbida, così la foto e la superficie dietro di essa stanno bene insieme. [La foto in duotone](https://gradiently.design/it/guide/photo-duotone-in-mark-colours) spiega le opzioni di tinta.

Un post verticale per un corso di yoga della domenica mattina su uno sfondo morbido e fluido con forme organiche

Un post di uno studio di yoga in cui la superficie morbida e fluida porta la calma, e le parole stanno nella sua zona più quieta.

## Gradienti organici e forme morbide

Le forme non hanno bisogno di bordi netti per sembrare organiche. Gradienti radiali sovrapposti con una dissolvenza morbida sembrano pozze di colore, come inchiostro che si allarga nell’acqua. È l’idea dei [gradienti mesh](https://gradiently.design/it/guide/mesh-gradients), e puoi avvicinarti con gradienti radiali a più livelli.

- Pozza pesca su crema: `radial-gradient(ellipse 60% 45% at 30% 35%, #f4a99a 0%, #f6e4d8 55%, #faf3ec 100%)`
- Ciottolo salvia su nebbia: `radial-gradient(ellipse 55% 70% at 70% 60%, #8fb9a8 0%, #d6e6dc 50%, #f3f5ef 100%)`
- Bagliore prugna sulla notte: `radial-gradient(ellipse 70% 50% at 50% 70%, #6b4fa0 0%, #2c2147 50%, #15111f 100%)`

Pozze ellittiche morbide. Ellissi fuori centro e leggermente allungate sembrano molto più naturali di un cerchio centrale perfetto.

## Una forma blob in CSS da copiare

Sul web il blob più semplice usa `border-radius` con otto valori: quattro raggi orizzontali, una barra, poi quattro verticali. Animare tra due serie di valori fa respirare lentamente la forma. Il [riferimento border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) di MDN spiega la sintassi.

```css
.blob {
  width: 320px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #f4a99a, #d9776a);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: breathe 12s ease-in-out infinite alternate;
}

.blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@keyframes breathe {
  to { border-radius: 58% 42% 38% 62% / 55% 61% 39% 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}
```

Un blob che funziona anche da cornice per foto. L’animazione lenta e alternata si ferma per chi preferisce meno movimento.

Per contorni più complessi, disegna la forma come tracciato SVG e usala con `clip-path`. Limita il tracciato a una manciata di curve lisce, per le stesse ragioni del disegno a mano. Se il brand ha bisogno di calore anche nel colore e nei caratteri, il [branding giocoso](https://gradiently.design/it/guide/playful-design) si abbina naturalmente alle forme morbide.

## FAQ

### Cosa sono le forme organiche nel design?

Forme irregolari e fluide come blob, ciottoli, foglie, onde e archi, che sembrano naturali invece che costruite con regole come quadrati e cerchi.

### Cosa comunicano le forme organiche?

Morbidezza, calma, calore e un tocco umano. Per questo sono diffuse nei brand di benessere, cibo, bellezza e infanzia.

### Come si crea una forma blob in CSS?

Dai a un elemento larghezza e altezza uguali e un `border-radius` a otto valori, come `42% 58% 63% 37% / 41% 44% 56% 59%`. Anima tra due serie di valori per una lenta trasformazione.

### Come metto una foto in una forma blob?

Ritagliala con una maschera a blob nel tuo strumento di design, oppure sul web dai all’immagine lo stesso `border-radius` o un `clip-path` SVG. Lo Studio di Gradiently può ritagliare le foto in blob, archi e cerchi direttamente.

### Si possono usare insieme forme organiche e geometriche?

Sì. Una griglia geometrica per testi e impaginazione con una sola forma organica per dare calore è una combinazione comune ed equilibrata.