# Texture per gradienti: grana, carta, vetro e seta spiegate

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

Due gradienti con colori identici possono sembrare un fotogramma di pellicola, un biglietto stampato a caratteri mobili, lo schermo di un telefono o un abito da sera. La differenza è la texture, e dice più dei colori.

## The short version

- La texture di un gradiente è qualsiasi dettaglio di superficie steso su una sfumatura di colore, come grana, fibra di carta, vetro o riflesso di seta, che lo fa leggere come un materiale.
- Ogni famiglia di texture ha le sue associazioni: la grana suggerisce pellicola e stampa, la carta l’artigianato, il vetro la tecnologia e la seta il lusso.
- La texture cambia il carattere di un gradiente più di quanto lo faccia un cambio di colore, ed è per questo che è una delle cose più difficili da copiare.
- Le texture si possono sovrapporre, di solito come una struttura come seta o scanalatura, una superficie come grana o carta e una luce sopra.
- La texture deve restare fuori dalla strada delle parole: più leggera dietro il testo, più forte nelle aree aperte.

La **texture di un gradiente** è la superficie che stendi su una sfumatura di colore perché si legga come un materiale e non come un’impostazione predefinita dello schermo: una grana fine come la pellicola, la grana della carta, la limpidezza e la rifrazione del vetro, o le pieghe morbide della seta. I colori dicono che umore hai; la texture dice di cosa è fatta la cosa. Per questo due gradienti con colori identici possono sembrare completamente diversi, e per questo la texture è una delle parti più distintive di un’identità visiva.

## Le quattro famiglie di texture

| Texture | Che aspetto ha | Cosa dice | Si adatta a |
| --- | --- | --- | --- |
| Grana | Fine puntinatura casuale sul colore | Pellicola, stampa, calore analogico | Editoria, musica, fotografia, la maggior parte dei brand |
| Carta | Fibre morbide e trama, base bianco sporco caldo | Artigianato, calma, qualcosa fatto a mano | Cartoleria, cibo, libri, studi |
| Vetro | Limpidezza, sfocatura, rifrazione, riflessi netti | Tecnologia, precisione, profondità | App, software, hardware, finanza |
| Seta | Pieghe lisce con riflessi morbidi e mobili | Lusso, morbidezza, sensualità | Bellezza, moda, profumi, gioielli |

Quattro famiglie, quattro voci. Scegli quella che corrisponde a ciò di cui sarebbe fatto il tuo brand se fosse un oggetto.

## Grana: pellicola e stampa

La grana è la texture più versatile e la più facile da aggiungere. Un sottile strato di rumore monocromatico fa sembrare una sfumatura fotografata o stampata, e nasconde anche il banding che i gradienti digitali lisci mostrano spesso. Funziona con quasi qualsiasi palette, ed è per questo che è diventata il ritocco finale predefinito. Quanta usarne, e come, è spiegato nei [gradienti con grana](https://gradiently.design/it/guide/grainy-gradients).

## Carta: artigianato e calma

La texture di carta porta una base bianco sporco calda, fibre morbide e una lieve irregolarità, come se il gradiente fosse stato stampato o dipinto. Si abbina naturalmente ai colori chiari, agli inchiostri spenti e ai caratteri con grazie. Tieni piccole le fioriture di colore e lascia che la carta si veda; un gradiente pastello o terroso su carta sembra fatto a mano come non riesce mai un fondo bianco puro. Vedi i [gradienti pastello](https://gradiently.design/it/guide/pastel-gradients) per palette adatte.

- Carta: fioritura albicocca: `radial-gradient(circle at 20% 25%, #f3c9a8 0%, #f5ebe0 45%, #efe6da 100%)`
- Seta: raso vinaccia: `linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%)`
- Vetro: scanalato: `repeating-linear-gradient(90deg, #0f3d4c 0px, #1f6f86 14px, #8fd3e8 18px, #1f6f86 22px, #0f3d4c 36px)`
- Vetro: lastra con riflesso: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 45%, #93c5fd 49%, #1e3a8a 53%, #0f172a 100%)`

Bozzetti di texture con singoli gradienti CSS. Il raso nasce da bande nitide e luminose tra pieghe più scure; il vetro scanalato da riflessi stretti ripetuti; una lastra da un solo riflesso sottile.

## Vetro: tecnologia e profondità

Le texture di vetro sono di due tipi. Il vetro smerigliato sfoca ciò che sta dietro, ed è la base del [glassmorphism](https://gradiently.design/it/guide/glassmorphism). Il vetro limpido o scanalato rifrange il colore in bande e aggiunge riflessi nitidi dove la luce colpisce un bordo. Entrambi suggeriscono precisione e hardware moderno. Il punto chiave è il riflesso: una linea sottile e luminosa posta dove la luce colpirebbe, e un colore più scuro dappertutto altrove.

## Seta: lusso e morbidezza

Seta e raso sembrano pieghe lisce di tessuto: ampie ombre morbide e riflessi stretti e luminosi dove la stoffa gira verso la luce. Sullo schermo significa un gradiente con bande di luce nitide tra toni più profondi, spesso in una sola tinta. I colori gioiello intensi, come vinaccia, smeraldo e blu notte, sembrano abiti da sera; quelli chiari, come champagne e rosa tenue, sembrano da sposa o da cura della pelle. La seta funziona benissimo al rallentatore, dove i riflessi possono scivolare.

## Come sovrapporre le texture

I materiali reali combinano texture: la seta ha una lucentezza e una trama, la carta stampata ha fibre e grana d’inchiostro. I gradienti possono fare lo stesso, purché ogni livello abbia un compito chiaro. Un ordine affidabile è colore, poi struttura, poi superficie, poi luce.

1. **Campo di colore** La sfumatura in sé: il tuo gradiente, mesh o alone. Sistema prima questo; la texture non può correggere una palette fangosa.
2. **Struttura** La forma a grande scala del materiale: pieghe di seta, scanalature di vetro, la morbida irregolarità della carta. Cambia il modo in cui scorre il colore.
3. **Superficie** Il dettaglio fine: grana o trama della carta. Sta sopra tutto e fa sembrare fisica la superficie.
4. **Luce** Riflessi e ombre che dicono all’occhio da dove viene la luce. Un’unica sorgente di luce coerente fa leggere tutti i livelli come un solo oggetto.

```css
.silk {
  position: relative;
  isolation: isolate;
  /* colour and structure: satin folds in one hue */
  background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}

.silk::after {
  /* surface: fine monochrome grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.25;
}
```

Due livelli sovrapposti: una struttura di raso nel gradiente e una superficie a grana fine fusa sopra con Luce soffusa.

## Texture e leggibilità

La texture aggiunge dettaglio, e il dettaglio dietro le lettere piccole le rende più difficili da leggere. Tieni la texture più leggera dietro il testo e più forte nelle aree aperte, e tieni testo e loghi sopra ogni livello di texture perché i loro bordi restino nitidi. I riflessi forti della seta e i riflessi del vetro sono il rischio maggiore, perché creano linee luminose che possono tagliare una parola. Vedi il [testo su sfondi movimentati](https://gradiently.design/it/guide/type-on-busy-backgrounds).

Un post con una citazione in cui lo sfondo con texture corre a piena forza dietro le parole

La texture a piena forza dietro le parole: la superficie compete con la frase.

Lo stesso post con la citazione e un’area più calma dello sfondo con texture dietro le parole

Lo stesso materiale che si rilassa dietro le parole: texture dove c’è spazio, calma dove c’è testo.

## La texture come identità

I colori si possono prelevare da uno screenshot in pochi secondi. Una texture, e il modo in cui si comporta con la luce e il movimento, è molto più difficile da riprodurre. Questo fa della texture uno dei modi più forti per rendere tuo un gradiente. Ogni Mark di Gradiently sovrappone fino a tre materiali ai suoi colori, con la sua luce e la sua grana, e la Forge ti lascia sceglierli controllo per controllo.

Un Mark è colori più materiali, luce, grana e movimento. Sono i materiali a farlo sembrare un oggetto.

## FAQ

### Cos’è la texture di un gradiente?

La texture di un gradiente è un dettaglio di superficie steso su una sfumatura di colore, come grana, carta, vetro o seta, perché il gradiente si legga come un materiale.

### Quale texture dovrei usare su un gradiente?

Abbina la texture a ciò di cui sarebbe fatto il tuo brand: grana per pellicola e stampa, carta per l’artigianato, vetro per la tecnologia, seta per il lusso.

### Come aggiungo una texture a un gradiente in CSS?

Sovrapponi al gradiente un’immagine di rumore o di motivo con una modalità di fusione come Luce soffusa o Sovrapponi, a bassa opacità.

### Si possono combinare più texture su un solo gradiente?

Sì. Sovrapponile per compito: campo di colore, poi struttura come le pieghe di seta, poi superficie come la grana, poi luce.

### La texture rende il testo più difficile da leggere?

Può farlo. Tieni la texture più leggera dietro le parole e tieni il testo sopra tutti i livelli di texture.