# Texture del brand: la qualità materica che rende un look tuo

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

Colore e carattere si copiano facilmente. La texture, cioè grana, lucentezza e luce su una superficie, è molto più difficile da copiare e dice sorprendentemente molto di un brand.

## The short version

- La texture del brand è la qualità materica delle sue superfici, come grana, grana della carta, lucentezza vitrea o luce morbida.
- La texture cambia come si percepisce un colore: lo stesso viola sembra pellicola sulla grana, tecnologia sul vetro e lusso sulla seta.
- Una texture è più difficile da copiare di un codice hex, perché è una combinazione di materiale, luce e scala e non un singolo valore.
- Una buona texture di brand è abbastanza discreta da stare dietro le parole e abbastanza coerente da essere riconosciuta in ogni formato.
- La grana nasconde anche le bande di colore, quindi migliora la qualità oltre al carattere.

La **texture del brand** è la qualità materica di tutto ciò che un brand mette su una superficie: la grana di uno sfondo, la grana di una carta, la lucentezza del vetro, la direzione e la morbidezza della luce. È la differenza tra un colore su uno schermo e un colore su qualcosa. Due brand possono condividere palette e carattere, ma se uno sta su una fine grana di pellicola e l’altro su vetro pulito, nessuno li confonderà.

La texture è anche una delle poche parti di un look che resiste alla copia. Chiunque può leggere i tuoi codici hex da uno screenshot. Riprodurre la tua esatta grana, la sua dimensione, la sua densità, il modo in cui la luce cade su di essa è molto più difficile, il che la rende una forte candidata a firma della tua [identità visiva](https://gradiently.design/it/guide/visual-identity).

## Cosa fa la texture a un brand

La texture porta associazioni che le persone colgono all’istante, molto prima di leggere una parola. Risponde a domande come: è fatto a mano o progettato, caldo o freddo, quotidiano o speciale?

| Famiglia di texture | Si legge come | Adatta a |
| --- | --- | --- |
| Fine grana di pellicola | Analogico, editoriale, meditato | Studi, editori, fotografi, musica |
| Grana della carta | Artigianale, stampato, calmo | Artigiani, panifici, cartolerie, benessere |
| Lucentezza vitrea | Preciso, digitale, moderno | Software, fintech, lanci di prodotto |
| Luce di seta o raso | Morbido, costoso, sensuale | Bellezza, gioielli, moda, hotel |
| Colore piatto e pulito | Diretto, grafico, audace | Campagne, sport, brand giovani |

Cinque famiglie di texture comuni e la sensazione che porta ciascuna. Anche il colore piatto è una scelta di texture: l’assenza di materia dice qualcosa.

Nessuna è migliore delle altre. Conta che la texture sia coerente con ciò che dici di te. Un brand che parla di lento artigianato e pubblica su vetro lucido manda un messaggio contraddittorio. La [personalità del brand](https://gradiently.design/it/guide/brand-personality) è un buon punto di partenza se non sei sicuro di cosa debba dire la tua.

## Grana, materiale e luce: i tre strati

La maggior parte delle texture che sembrano ricche è costruita su tre strati. Pensarli separatamente rende la texture qualcosa che puoi progettare di proposito invece di un filtro applicato alla fine.

1. **Materiale** Il comportamento di base della superficie: come vi scorre il colore. Sfumature morbide, pieghe dolci, forme liquide o sfaccettature nette.
2. **Luce** Da dove arriva e quanto è dura. Una luce morbida da un angolo dà profondità; una luce uniforme sembra piatta e digitale.
3. **Grana** Il fine rumore sopra. Un po’ fa sembrare reale una superficie e nasconde le bande; troppa sembra sporca e combatte le parole.

- Uniforme, senza fonte di luce: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Luce morbida, in alto a destra: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Luce calda, in basso a sinistra: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

Una famiglia di colori sotto tre tipi di luce. La sola luce cambia l’atmosfera prima ancora di aggiungere la grana.

Per lo strato di grana sul web basta un minuscolo rumore SVG sovrapposto allo sfondo. Tieni bassa l’opacità; vuoi sentirla più che vederla.

```css
.brand-surface {
  position: relative;
  background: radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%);
}

.brand-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Un gradiente illuminato con uno strato di rumore fine sopra. Alza `baseFrequency` per una grana più fine, abbassa `opacity` per una più discreta.

I [gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) hanno altre ricette di grana, e le [bande nei gradienti](https://gradiently.design/it/guide/gradient-banding) spiegano perché il rumore è anche il rimedio standard alle strisce visibili nelle sfumature morbide.

## Come scegliere la texture del tuo brand

- **Parti da una parola.** Scrivi l’unica sensazione che vuoi dare, come «artigianale» o «preciso», e scegli la famiglia che le corrisponde.
- **Provala dietro le parole.** La texture vive sotto titoli, prezzi e date. Se li rende più difficili da leggere alla dimensione di un telefono, è troppo forte.
- **Controllala ai due estremi.** Guardala su una storia 1080×1920 e su un biglietto da visita 1050×600. Una grana che va bene in grande può diventare poltiglia in piccolo.
- **Controllala in stampa.** Una grana che canta sullo schermo può sembrare un difetto di stampa sulla carta. Stampa un volantino A5 prima di decidere.

Un post verticale di un panificio con la scritta Pane a lievito madre, ogni mattina, su uno sfondo morbidamente materico

Una superficie più morbida per un panificio: il materiale può dire fatto a mano prima delle parole.

Un post verticale fintech con la scritta Pagamenti, regolati in secondi, su un diverso sfondo materico

Un altro Mark per un prodotto fintech. Stesso layout, un brand completamente diverso.

## Errori che fanno sembrare economica la texture

### Evita

- Una foto stock di carta incollata sotto tutto
- Grana pesante che rende sfocato il testo
- Una texture diversa su ogni piattaforma
- Texture dietro le parole, piatto ovunque altrove
- Scalare un’unica immagine con texture a ogni dimensione

### Fai

- Una texture costruita da materiale, luce e grana
- Grana abbastanza fine da sentirla, non da notarla
- Una sola superficie su feed, sito e stampa
- La stessa superficie su ogni quadro
- Rendere la texture da capo a ogni dimensione

L’ultimo punto coglie in fallo molti brand. Quando un’immagine con texture viene stirata da un post quadrato a un banner largo, si stira anche la grana e la luce finisce in un punto strano. Una texture va resa alla dimensione in cui si usa, come tratta anche la [texture di sfondo](https://gradiently.design/it/guide/background-texture).

## Rendere tua una texture

Un overlay di rumore gratuito è disponibile per tutti, ed è proprio il problema: più una texture diventa popolare, meno dice di te. Per rendere una texture riconoscibile come tua, deve essere una combinazione specifica che nessun altro usa.

È ciò per cui è fatto un Mark di Gradiently. Ogni Mark è una ricetta di colori, fino a tre materiali sovrapposti, luce, grana e movimento, e ciascuno viene confrontato con ogni altro perché non ce ne siano due uguali. Si rende dal vivo a ogni dimensione in cui progetti, così grana e luce stanno sempre al posto giusto, e attenua i dettagli dietro le tue parole perché i titoli restino leggibili. Quando riservi un Mark, solo tu puoi esportare con esso. I [materiali dei gradienti](https://gradiently.design/it/guide/mark-materials-explained) spiega i livelli di materiale in modo più dettagliato.

Un Mark è la texture come asset di brand: materiale, luce e grana in un’unica ricetta, con un solo proprietario alla volta.

## FAQ

### Che cos’è la texture nel branding?

È la qualità materica delle superfici visive di un brand, come grana, carta, lucentezza o luce, che dà forma a come si percepiscono colori e parole.

### La grana aiuta o danneggia la leggibilità?

Una grana fine e a bassa opacità di solito non danneggia e spesso aiuta nascondendo le bande. Una grana pesante dietro un testo piccolo rende sfocate le lettere, quindi tienila discreta dove stanno le parole.

### La texture può far parte dell’identità di un brand?

Sì. Una texture coerente usata su ogni superficie diventa riconoscibile da sola, come un colore o un carattere.

### Come aggiungo la grana a un gradiente in CSS?

Sovrapponi al gradiente una piccola immagine di rumore SVG con uno pseudo elemento, con un’opacità intorno al 10 o 15 percento e una fusione overlay.