# Gradienti con rumore: colore liscio con finitura granulosa

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

I gradienti con rumore sono facili da descrivere e delicati da ottenere. Ecco cinque ricette collaudate, ciascuna con i suoi colori, le sue impostazioni del rumore e il motivo per cui funzionano, più cosa fa davvero ogni cursore di un generatore.

## The short version

- Un gradiente con rumore è una sfumatura di colore liscia con sopra uno strato di rumore casuale fine, che gli dà una finitura stampata e tattile e nasconde le bande.
- Le due impostazioni che contano di più sono la frequenza del rumore, che controlla la dimensione della grana, e l’opacità, che controlla quanto appare forte.
- Il rumore frattale a una frequenza tra 0,6 e 0,9, combinato in Overlay o Soft Light con un’opacità dall’8 al 20 per cento, va bene per la maggior parte degli sfondi per schermo.
- I gradienti scuri con rumore richiedono meno rumore di quelli chiari, perché la grana si vede di più nelle ombre e nei toni medi.
- In CSS il rumore si può disegnare con un filtro SVG `feTurbulence` inline, così resta nitido a qualsiasi dimensione e non richiede alcun file immagine.

Un **gradiente con rumore** è una sfumatura di colore liscia con sopra uno strato fine di rumore casuale, così il colore sembra stampato e non generato. La sfumatura ti dà il colore e la direzione della luce; il rumore ti dà una superficie e impedisce alla sfumatura di spezzarsi in bande. Qui sotto trovi cinque ricette da copiare, poi una spiegazione semplice di ogni impostazione del generatore, così puoi creare le tue.

## Cinque ricette di gradienti con rumore

Ogni ricetta è un gradiente di base e un’impostazione del rumore. I gradienti sono mostrati qui senza rumore così puoi vedere il colore; la tabella sotto indica il rumore da aggiungere sopra. Sono volutamente diversi tra loro: uno scuro, uno chiaro, uno caldo, uno freddo, uno audace.

- 1. Viola notte: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Carta pesca: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Poster al tramonto: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Laguna profonda: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Blu limpido: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

Le cinque sfumature di base, prima del rumore. Clicca su una per copiare il suo CSS.

| Ricetta | Frequenza | Fusione | Opacità | Perché |
| --- | --- | --- | --- | --- |
| 1. Viola notte | 0,85, 3 ottave | Overlay | 8% | I toni scuri mostrano facilmente la grana, quindi tienila leggera |
| 2. Carta pesca | 0,65, 4 ottave | Multiply | 10% | Multiply scurisce soltanto, quindi il fondo chiaro resta morbido |
| 3. Poster al tramonto | 0,6, 3 ottave | Overlay | 20% | Un colore audace regge una grana più pesante e grossa, come una serigrafia |
| 4. Laguna profonda | 0,9, 2 ottave | Soft Light | 12% | Una grana fine mantiene pulita una sfumatura fredda |
| 5. Blu limpido | 0,75, 3 ottave | Soft Light | 14% | Il blu verso l’azzurro pallido forma bande vistose; il rumore le smussa |

Impostazioni del rumore per ogni ricetta, con rumore frattale in monocromia. Frequenza e ottave corrispondono direttamente al filtro SVG nel codice qui sotto.

## Le impostazioni di un generatore di gradienti con rumore spiegate

Ogni [generatore di gradienti](https://gradiently.design/it/guide/gradient-generator) con un’opzione di rumore, e ogni filtro SVG di rumore, usa una versione degli stessi controlli. Una volta che sai cosa fa ciascuno puoi leggere qualsiasi ricetta e correggere qualsiasi risultato.

| Impostazione | Cosa cambia | Un buon punto di partenza |
| --- | --- | --- |
| **Frequenza** (scala, dimensione) | La dimensione della grana. Più alta è più fine, più bassa è più grossa. | Da 0,6 a 0,9 per gli schermi |
| **Ottave** (dettaglio) | Strati di dettaglio dentro il rumore. Più ottave sono più ricche e costano di più da disegnare. | Da 2 a 4 |
| **Tipo** | Il rumore frattale è morbido e nuvoloso; la turbolenza è più netta e striata. | Rumore frattale |
| **Colore** | La monocromia mantiene esatta la tua palette; il rumore colorato aggiunge puntini da pellicola. | Monocromia |
| **Modalità di fusione** | Come il rumore si mescola al colore. Overlay aggiunge contrasto, Soft Light è più delicato, Multiply scurisce soltanto. | Overlay o Soft Light |
| **Opacità** (quantità) | L’intensità complessiva. | Dall’8 al 20% |
| **Seed** | Quale schema casuale ottieni. Cambialo se vedi un grumo che non ti piace. | Qualsiasi |

I controlli dietro ogni generatore di rumore, in parole semplici.

> **Giudica il rumore alla dimensione finale** Un rumore che sembra giusto ingrandito su un portatile spesso sparisce su un telefono o diventa poltiglia dopo un caricamento. Controlla l’esportazione alla dimensione in cui le persone la vedranno, sullo schermo che useranno.

## Come fare un gradiente con rumore in CSS

Il metodo più pulito sovrappone un’immagine di rumore SVG al tuo gradiente in una sola dichiarazione `background`, poi li fonde. Sostituisci il gradiente con una qualsiasi delle ricette sopra e imposta frequenza e opacità dalla tabella.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}
```

La ricetta 1 in CSS. Il rumore sta su uno pseudo elemento sotto il contenuto, così il testo resta nitido. `stitchTiles` fa ripetere la tessera senza giunzioni.

### Il metodo a puntini ad alto contrasto

Per un aspetto più audace, quasi da risografia, metti il rumore e il gradiente nello stesso strato e passali attraverso un filtro di contrasto. Il rumore si schiaccia in puntini duri che seguono la luce del gradiente. È più rumoroso della ricetta 3, quindi usalo per poster e banner hero, non dietro il testo del corpo.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Il contrasto schiaccia il rumore morbido in puntini, e la luminosità forte spinge il resto verso il bianco. Multiply poi stende il risultato su un genitore colorato. Regola insieme i due valori dei filtri e tieni il testo in uno strato separato sopra.

## Scegliere il rumore giusto per il formato

Il rumore è relativo alla tela. Lo stesso filtro appare fine su una storia da telefono e grosso su un piccolo banner, quindi scala la frequenza sul formato anziché riusare ovunque lo stesso file.

Una storia verticale con conto alla rovescia su uno sfondo a gradiente viola con grana

Una storia da 1080×1920 si vede da vicino su un telefono: tieni il rumore fine e piuttosto leggero.

Un ampio hero per sito web con un titolo su un gradiente caldo con una leggera grana

Un hero di sito da 1920×1080 riempie uno schermo grande: abbassa l’opacità, perché le aree ampie rendono evidente il rumore.

- **Storie e post:** frequenza intorno a 0,8, opacità dall’8 al 14 per cento. Un po’ più di quanto pensi, perché i caricamenti la ammorbidiscono.
- **Hero di siti web:** frequenza da 0,7 a 0,9, opacità dal 4 al 10 per cento. Vedi [sfondi per hero di siti web](https://gradiently.design/it/guide/website-hero-background).
- **Poster per la stampa:** grana più grossa, frequenza da 0,5 a 0,7 alla dimensione finale in pixel, così sopravvive alla stampa.
- **Sfondi scuri:** dimezza la quantità abituale. [Gli sfondi a gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) spiega perché le ombre mostrano per prime la grana.

## Gradiente con rumore o gradiente con grana

Sono la stessa idea con un’enfasi diversa. Si dice gradiente con grana quando si intende l’aspetto, e gradiente con rumore quando si intende come è fatto. [I gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) spiega perché la grana funziona e dove metterla; questa pagina è il ricettario. Se vuoi la texture senza una sfumatura di colore, parti invece da [la texture di grana](https://gradiently.design/it/guide/textured-background).

Se preferisci non regolare affatto i cursori, ogni Mark di Gradiently porta con sé la propria impostazione di grana insieme a colori, luce e movimento, resa da capo a ogni dimensione così il rumore non si allunga né si sfoca mai. Progetta gratis con qualsiasi Mark non riservato.

## FAQ

### Che cos’è un gradiente con rumore?

Una sfumatura di colore liscia con sopra uno strato fine di rumore casuale. Il rumore gli dà una finitura stampata e nasconde le bande.

### Quali impostazioni del rumore devo usare per un gradiente?

Rumore frattale, monocromia, frequenza da 0,6 a 0,9 e da 2 a 4 ottave, combinato in Overlay o Soft Light con circa dall’8 al 20 per cento di opacità.

### Come aggiungo il rumore a un gradiente in CSS?

Sovrapponi al gradiente un SVG inline con un filtro `feTurbulence`, su uno pseudo elemento, e imposta `mix-blend-mode: overlay` con un’opacità bassa.

### Perché il mio gradiente con rumore sembra sfocato dopo il caricamento?

Le piattaforme ricomprimono le immagini e attenuano i dettagli fini. Esporta alla dimensione esatta della piattaforma in PNG o in JPEG di alta qualità, e usa un po’ più di rumore per i post social.

### Un gradiente con rumore è lo stesso di un gradiente con grana?

Sì, in pratica. Con grana descrive l’aspetto e con rumore descrive il metodo con cui lo si ottiene.