# Texture per sfondi: grana, carta, tessuto e vetro

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

La texture è ciò che trasforma un colore piatto sullo schermo in una superficie. Usata appena, aggiunge calore e nasconde il banding; usata troppo, diventa rumore. Ecco come trovare il limite.

## The short version

- Una texture di sfondo è un dettaglio fine della superficie, come la grana, le fibre della carta, un tessuto o il vetro satinato, sovrapposto a un colore o a un gradiente.
- La texture funziona meglio a bassa intensità, percepita più che vista, così aggiunge calore senza competere con il contenuto che ci sta sopra.
- La scala della texture deve corrispondere alla dimensione di visione: grana fine per schermi piccoli e visione ravvicinata, texture più grossolana per formati grandi visti da lontano.
- Sovrapporre la grana a un gradiente nasconde il banding, perché il dettaglio casuale spezza i gradini visibili tra le sfumature.
- Le piattaforme social e i codificatori video ricomprimono le immagini, e questo può impastare le texture molto fini: controlla la texture dopo il caricamento.

Una **texture di sfondo** è un dettaglio fine della superficie steso su un colore o un gradiente: il puntinato della grana della pellicola, le fibre della carta, la trama del lino, la brina del vetro. È ciò che fa leggere uno sfondo come un materiale e non come pixel. La regola che conta di più è l’intensità. Una texture che senti senza notarla rende un design più caldo e più prezioso; una texture che noti per prima diventa il soggetto e combatte con tutto ciò che c’è sopra.

Un post verticale con il titolo Mattine lente, buon caffè su un gradiente dalla texture morbida

Un gradiente con texture su un post verticale: la superficie si legge come un materiale, e le parole restano in primo piano.

## Tipi di texture di sfondo

| Texture | Dà la sensazione di | Ideale per |
| --- | --- | --- |
| Grana o rumore | Pellicola, stampa, una finitura opaca | Gradienti, sfondi scuri, tutto ciò che fa banding |
| Carta | Stampato, artigianale, editoriale | Citazioni, diari, inviti, brand calmi |
| Tessuto e lino | Morbido, intrecciato, tattile | Moda, interni, ospitalità |
| Vetro satinato | Moderno, a strati, luminoso | Interfacce, card sopra il colore, brand tech |
| Mezzatinta e punti riso | Stampa retrò, zine, poster | Post social giocosi ed editoriali |
| Pietra e cemento | Solido, architettonico, silenzioso | Lusso, architettura, fotografia di prodotto |

Le famiglie di texture più comuni e le associazioni che portano con sé. Scegline una per design.

Ogni texture porta con sé un’associazione. La grana dice pellicola e stampa, la carta dice artigianale, il vetro dice interfaccia. Scegli quella che corrisponde a ciò che il tuo brand deve trasmettere, poi usala ovunque; la carta su un post e il vetro su quello dopo annullano l’effetto. Se non hai ancora deciso che sensazione dare, [personalità del brand](https://gradiently.design/it/guide/brand-personality) ha un modo semplice per scegliere.

## Scala: adattare la texture alla dimensione di visione

La texture si legge in modo diverso a dimensioni diverse. Uno schermo di telefono tenuto vicino mostra ogni granello, quindi basta una grana fine. Un poster visto dall’altra parte di una stanza o una slide su un proiettore hanno bisogno di una texture più grossolana per farsi notare. E una texture che va bene su un post da 1080×1350 può sparire quando una piattaforma lo riduce a miniatura, o trasformarsi in macchie quando viene ricompressa.

- Story 1080×1920: fine: 1080 × 1920
- Post 1080×1350: fine: 1080 × 1350
- Slide 1920×1080: media: 1920 × 1080
- Stampa A3 3508×4961: grossa: 3508 × 4961

La stessa texture ha bisogno di una scala diversa per ogni formato e distanza di visione.

In stampa la grana in genere resiste bene e aiuta anche a riprodurre i gradienti in modo pulito; [stampare i gradienti](https://gradiently.design/it/guide/print-gradients) tratta i dettagli.

## Texture sopra i gradienti

L’abbinamento più utile è la texture sopra un gradiente. La grana spezza i gradini visibili che compaiono nelle sfumature lisce, il cosiddetto banding, e fa sembrare stampato un gradiente digitale. Il metodo abituale è mettere la texture come livello separato sopra il colore e fonderla con una modalità come Sovrapponi o Luce soffusa a bassa opacità, così ombreggia il colore invece di coprirlo.

1. **Parti dal colore** Sistema prima il gradiente. La texture non salva colori che non stanno bene insieme.
2. **Aggiungi un livello di texture** Mettilo sopra il gradiente. Usa una texture grigia o neutra, così non colora il colore.
3. **Fondila** Imposta il livello su Sovrapponi o Luce soffusa. Luce soffusa è più delicata e mantiene puliti i colori.
4. **Abbassa l’intensità** Riduci l’opacità finché noti la texture solo se la cerchi, spesso molto sotto la metà.
5. **Controlla la zona più scura** Il banding si nasconde nelle sfumature lente e scure. Assicurati che la texture vi abbia sciolto ogni gradino.

Sul web lo stesso approccio richiede poche righe di codice; vedi [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture). Per capire perché la grana in particolare sta così bene sui gradienti, leggi [gradienti con grana](https://gradiently.design/it/guide/grainy-gradients).

## Texture e leggibilità

### Evita

- Texture forte direttamente dietro il testo piccolo
- Motivi ad alto contrasto, come una trama di lino marcata sotto il testo corrente
- Due o tre texture diverse in un solo design
- Texture così fine da impastarsi dopo il caricamento

### Fai

- Texture appena visibile, o una zona più calma dove stanno le parole
- Texture a basso contrasto in tonalità vicine di un solo colore
- Una sola famiglia di texture in ogni formato
- Controlla la versione caricata, non solo l’esportazione

La texture aggiunge rumore visivo vicino alle lettere, e il testo piccolo ne soffre per primo. Tieni la texture appena visibile dove sta il testo, oppure dai alle parole una zona calma e uniforme dello sfondo. [Testo su sfondi affollati](https://gradiently.design/it/guide/type-on-busy-backgrounds) tratta le tecniche nel dettaglio.

Un post quadrato con citazione in cui lo sfondo con texture passa invariato dietro il testo

Texture e colore che attraversano le parole…

Lo stesso post quadrato con citazione, con lo sfondo più calmo e a contrasto più alto dietro il testo

…e lo stesso sfondo che fa spazio calmo dietro di esse.

## Una texture che resta coerente

La texture si perde facilmente da uno strumento all’altro: un livello di grana in un file, un’immagine di carta in un altro, un’intensità diversa a ogni esportazione. In Gradiently la texture fa parte dello sfondo stesso. Un Mark sovrappone fino a tre materiali con grana e luce, così la stessa superficie viene resa dietro ogni design a ogni dimensione, e la sua zona più calma si sposta dietro le parole.

Un Mark: colore, materiale e grana resi insieme, identici in ogni formato.

## FAQ

### Cos’è una texture di sfondo?

Un dettaglio fine della superficie, come la grana, le fibre della carta, la trama di un tessuto o il vetro satinato, sovrapposto a un colore o a un gradiente perché si legga come un materiale fisico.

### Quanto deve essere forte una texture di sfondo?

Appena visibile. Dovresti notarla solo se la cerchi. Se la texture è la prima cosa che vedi, riducine l’opacità.

### Aggiungere texture risolve il banding dei gradienti?

Di solito la grana sì. Il dettaglio fine e casuale spezza i gradini visibili tra le sfumature, così il passaggio sembra liscio.

### Quale modalità di fusione devo usare per la texture?

Luce soffusa per un effetto delicato che mantiene puliti i colori, oppure Sovrapponi per uno più forte. Usa una texture grigia neutra, così non colora il colore.

### Perché la mia texture sembra macchiata sui social?

Le piattaforme ricomprimono i caricamenti, e questo può impastare le texture molto fini. Usa una texture un po’ più grossolana e controlla il risultato caricato.