# Sfumature liquide: colore fluido che sembra versato

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

Le sfumature liquide sembrano vernice versata su una tela o inchiostro che si arriccia nell’acqua. Si ottengono piegando bande di colore, non fondendole. Ecco come.

## The short version

- Una sfumatura liquida sembra versata perché i suoi colori restano bande separate che si piegano, vorticano, si assottigliano e si ispessiscono, invece di sfumare in modo uniforme l’uno nell’altro.
- Il modo consueto per ottenerne una è partire da strisce di colore dritte e distorcerle con un filtro di deformazione, liquify o displacement.
- Sul web, un filtro SVG che combina feTurbulence e feDisplacementMap può trasformare una sfumatura CSS a strisce in una superficie marmorizzata e liquida.
- Sottili bande chiare lungo le curve si leggono come luce che cattura una superficie bagnata e rendono l’effetto molto più convincente.
- Le sfumature liquide sono vivaci, quindi il testo ha bisogno di una zona calma o di una forma ampia e semplice in cui il flusso rallenta.

Una **sfumatura liquida** è un colore che sembra versato invece che fuso: bande di tinta che si arricciano l’una intorno all’altra, si assottigliano in un punto e si raccolgono in un altro, con un lampo di luce lungo le curve. Pensa ai dipinti acrilici a colata, alle carte marmorizzate, all’olio su una strada bagnata o all’inchiostro caduto nell’acqua. La parte sorprendente è come si ottengono. Non si fondono i colori per arrivarci; si parte da strisce nette e si piegano. Ecco perché un normale strumento per sfumature da solo non produce mai del tutto questo aspetto.

## Cosa fa sembrare liquido un colore

- **Bande, non sfumature.** Ogni colore mantiene la sua identità come un nastro. Una sfumatura ampia e morbida si legge come aria, non come liquido.
- **Spessore variabile.** La stessa banda si gonfia e si restringe mentre scorre, come fa la vernice quando fluisce.
- **Niente spigoli.** Ogni curva è una curva. Un solo angolo netto rompe l’illusione.
- **Luce sulle curve.** Una sottile linea chiara lungo alcuni bordi si legge come un riflesso bagnato.
- **Una sola direzione di flusso.** Vortici che pendono tutti dalla stessa parte danno l’idea di un’unica colata.

## Quattro look di sfumatura liquida

Questi campioni sono la materia prima: le bande di colore che piegheresti. Ognuno è un singolo valore CSS, quindi puoi copiarlo come punto di partenza per qualsiasi dei metodi qui sotto.

- Bande di colata acrilica: `repeating-linear-gradient(115deg, #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%)`
- Bande marmorizzate: `repeating-linear-gradient(80deg, #f5f5f4 0%, #e7e5e4 7%, #a8a29e 9%, #f5f5f4 12%, #d6d3d1 18%)`
- Macchia d’olio: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Metallo fuso: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`

Strisce pronte per essere deformate. Il metallo fuso ha bande nette e luminose tra quelle scure, che una volta piegate diventano riflessi cromati.

- Indaco profondo: #1e1b4b
- Oltremare: #4f46e5
- Rosa colata: #f472b6
- Riflesso crema: #fde68a
- Cellula turchese: #0d9488

Una palette da colata: una base scura, due medi forti, un riflesso chiaro usato in linee sottili e un accento che compare in piccole cellule.

Nota il colore chiaro. In un dipinto a colata, il tono più chiaro è di solito la banda più sottile, ed è ciò che fa sembrare ricchi i colori più scuri intorno. Usalo come un riflesso, non come un riempimento.

## Come creare una sfumatura liquida in uno strumento di design

1. **Disegna le strisce** Riempi un canvas più grande della misura finale con da cinque a otto bande di colore in diagonale. Fai alcune bande larghe e altre molto sottili.
2. **Deforma tutto** Usa una distorsione warp, twirl o a onda per piegare le strisce in un’ampia curva a S. Mantieni delicato il primo passaggio.
3. **Spingi con un pennello liquify** Con un pennello grande e morbido, trascina le bande in una direzione per creare vortici e pozze. Lavora dal grande al piccolo.
4. **Aggiungi qualche riflesso** Dipingi sottili linee chiare lungo due o tre curve, seguendo il flusso, a bassa opacità.
5. **Ritaglia la parte migliore** La distorsione lascia bordi disordinati. Ritaglia la sezione più interessante e dimensionala per il tuo formato.
6. **Finisci con la grana** Un leggero livello di rumore nasconde il banding dello stiramento e dà alla superficie un tocco tattile.

I nomi cambiano da software a software, ma la maggior parte degli editor ha uno strumento warp e uno liquify o sfumino. Le [sfumature in Photoshop](https://gradiently.design/it/guide/photoshop-gradient) e le [sfumature in Procreate](https://gradiently.design/it/guide/procreate-gradient) trattano gli strumenti specifici di ciascuno.

## Una sfumatura liquida con SVG e CSS

Sul web, un filtro SVG può fare la deformazione. `feTurbulence` genera rumore morbido e `feDisplacementMap` lo usa per spostare i pixel di una sfumatura a strisce. Un `baseFrequency` basso dà vortici ampi e lenti; uno `scale` alto spinge le bande più lontano.

```html
<svg width="0" height="0" style="position:absolute">
  <filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
    <feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<div class="liquid"></div>

<style>
  .liquid {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(115deg,
      #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
    filter: url(#liquid);
  }
</style>
```

Bande di colata acrilica piegate da un filtro di displacement SVG. Cambia il seed per ottenere una colata diversa con gli stessi colori.

> **Renderizza una volta per le superfici grandi** I filtri di displacement sono costosi sugli elementi grandi. Per uno sfondo a tutta pagina, renderizza il risultato in un’immagine alla misura che ti serve, oppure tieni piccolo l’elemento filtrato. [SVG feTurbulence](https://gradiently.design/it/guide/svg-noise-filter) spiega i parametri, e le [sfumature WebGL](https://gradiently.design/it/guide/shader-gradients) sono la via per il liquido che si muove in tempo reale.

## Far muovere le sfumature liquide

Il liquido è l’unico stile di sfumatura che quasi chiede di muoversi. Una colata che deriva lentamente nell’hero di un sito o in una Storia sembra viva. Tieni bassa la velocità, come se la vernice fosse densa, e mettila in loop in modo che la fine coincida con l’inizio. Animare la turbolenza dal vivo è pesante, quindi un breve video in loop esportato è di solito la via migliore. Un loop di 8-15 secondi dà alla colata il tempo di viaggiare senza che nessuno noti la ripetizione, e un MP4 a 1080×1920 serve Storie, Reel e sfondi per telefono da un unico file. [Sfondi sfumati animati](https://gradiently.design/it/guide/animated-gradient-background) tratta approcci più leggeri.

## Mettere parole su una sfumatura liquida

### Combatte le parole

- Bande sottili e ad alto contrasto dietro il titolo
- Vortici ovunque alla stessa densità
- Testo piccolo sulla pozza più affollata
- Riflessi che attraversano le lettere

### Porta le parole

- Una banda ampia e calma dove il flusso rallenta
- Vortici fitti ai bordi, calma al centro
- Testo grande e pesante con poche parole
- Riflessi tenuti lontano dal testo

Un post verticale con la sola parola Colata in grande su una sfumatura liquida che scorre

Una parola, testo pesante, su un tratto calmo di colore.

Una copertina musicale quadrata intitolata Risacca su uno sfondo sfumato liquido e vorticoso

Una copertina quadrata di un’uscita. I look liquidi vanno bene per la musica perché sembrano suono reso visibile.

I Mark di Gradiently sono sfondi vivi i cui materiali possono scorrere e derivare, e ognuno sposta da solo dietro le tue parole la zona più calma della sua superficie. Pro li esporta come GIF, MP4 o WebM, così un look liquido può diventare una Storia o un loop per un hero senza costruire uno shader. Leggi [testo su una sfumatura](https://gradiently.design/it/guide/text-on-gradient) per il lato della leggibilità.

## FAQ

### Come si crea una sfumatura liquida?

Disegna strisce di colore, poi piegale con uno strumento warp, twirl o liquify finché vorticano. Aggiungi sottili riflessi chiari lungo alcune curve e un po’ di grana.

### Si può fare una sfumatura liquida in CSS?

Per lo più con l’aiuto di SVG. Applica un filtro SVG con `feTurbulence` e `feDisplacementMap` a una sfumatura CSS a strisce per piegarla in un motivo liquido.

### Qual è la differenza tra una sfumatura liquida e una mesh?

Una sfumatura mesh fonde i colori in modo morbido su una griglia. Una sfumatura liquida mantiene i colori come bande distinte che si arricciano e si allungano, come vernice versata.

### Quali colori funzionano per una sfumatura liquida?

Una base scura, due colori medi forti e un tono chiaro usato solo in bande sottili. È il contrasto tra bande scure spesse e bande chiare sottili che si legge come liquido.