# Materiali delle sfumature spiegati: seta, aurora, grana e gli altri

[Canonical HTML page](https://gradiently.design/it/guide/mark-materials-explained)

Due Mark possono condividere una palette e non somigliarsi per niente, perché è il materiale a decidere come si comporta il colore. Un giro tra le famiglie, come si combinano livelli, luce e grana e cosa dice ciascuna.

## The short version

- Un materiale di sfumatura è la struttura che il colore riempie: una lucentezza, un bagliore, una trama, una pietra, una grana.
- Ogni Mark di Gradiently è costruito con fino a tre livelli di materiale sovrapposti, una base e fino a due altri fusi sopra.
- I materiali di Gradiently sono raggruppati in quattordici famiglie, da Sfumatura e Luce a Tessile, Minerale, Vetro, Metallo e Pittura.
- Luce, grana e movimento si impostano dentro ogni livello, così lo stesso materiale può essere quieto o drammatico.
- Scegli un materiale per ciò che la sua superficie suggerisce: la grana per stampa e artigianato, la seta per il lusso, vetro e cromo per la tecnologia.

I **materiali delle sfumature** sono ciò che fa sembrare una sfumatura qualcosa invece di una fusione tra due colori. Un materiale è la struttura che il colore riempie: una lucentezza direzionale nella Seta, tendaggi di luce nell’Aurora, morbide fioriture nella Mesh, sabbia nel Limo, venature nel marmo. Ogni Mark di Gradiently ne impila fino a tre, poi aggiunge luce, grana e movimento, ed è per questo che due Mark con la stessa palette possono non somigliarsi per niente.

## Cos’è un materiale

Pensa alla palette come alla vernice e al materiale come alla superficie su cui si applica. Versa lo stesso blu navy, verde petrolio e arancione su seta, vetro satinato o carta fatta a mano e ottieni tre oggetti diversi. In un Mark, ogni materiale attinge alla palette del Mark stesso, quindi cambiare il materiale cambia il carattere senza cambiare i colori.

- Seta: una lucentezza direzionale: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Aurora: luce che sale da un orlo: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Mesh: morbide fioriture: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)`
- Alone: una pozza di luce: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)`

Bozzetti CSS di quattro materiali in una palette. I Mark veri renderizzano una struttura molto più ricca, ma anche questi mostrano quanto decide il materiale.

## Le quattordici famiglie di materiali

Gradiently raggruppa i suoi materiali in famiglie in base a ciò a cui somigliano. I nomi qui sotto sono materiali veri che incontrerai nel [Mercato](/market); ogni famiglia ne contiene molti altri.

| Famiglia | Cos’è | Materiali che incontrerai |
| --- | --- | --- |
| Sfumatura | Fusioni, sfere e campi di colore | Angoli, Sfere, Pulviscolo, Perla |
| Luce | Bagliori, flare e fasci | Alone, Palco, Neon, Raggi |
| Fluido | Liquidi, inchiostro e metallo | Inchiostro, Mercurio, Colata, Lava |
| Atmosfera | Nebbia, nuvole e cielo | Foschia, Crepuscolo, Cumulo, Nebbia sul lago |
| Cosmo | Gas, stelle e spazio profondo | Nebulosa, Galassia, Via Lattea, Eclissi |
| Organico | Crescita, cellule e petali | Cellule, Corallo, Rosa, Felce |
| Minerale | Pietra, marmo e sabbia | Venatura, Limo, Agata, Travertino |
| Tessile | Seta, trame e maglia | Seta, Lino, Velluto, Raso |
| Vetro | Brina, prisma e acqua | Satinato, Prisma, Cannettato, Vetrata |
| Geometrico | Linee, punti e piastrelle | Retino, Archi, Griglia, Truchet |
| Grana | Carta, stampa e pellicola | Fibra, Risografia, Pellicola, Dithering |
| Metallo | Spazzolato, anodizzato e fuso | Spazzolato, Anodizzato, Fuso, Patina |
| Pittura | Olio, guazzo e pennello | Impasto, Guazzo, Acrilico, Vernice spray |
| Digitale | Schermi, disturbi e pixel | Schermo CRT, Disturbo digitale, Pixel ordinati, Parete LED |

Le famiglie come le chiama Gradiently. La Grana è una famiglia a sé, ed è anche un’impostazione dentro ogni livello.

### Seta, aurora e mesh

Questi tre sono quelli di cui le persone chiedono di più. La **Seta** è una lucentezza direzionale su fili sottili: elegante, un po’ formale, a suo agio con bellezza e moda. L’**Aurora** sono tendaggi di luce che salgono da un orlo luminoso in un cielo scuro, drammatica su un fondo vuoto. La **Mesh** sono morbide fioriture di colore che si sciolgono l’una nell’altra, la classica sfumatura moderna, amichevole e versatile. Le [sfumature seta](https://gradiently.design/it/guide/silk-gradient), le [sfumature aurora](https://gradiently.design/it/guide/aurora-gradients) e le [sfumature mesh](https://gradiently.design/it/guide/mesh-gradients) hanno ciascuna la propria guida con il CSS.

### Grana, carta e stampa

La famiglia Grana fa sembrare stampato uno schermo. **Fibra** è carta fatta a mano con lunghe fibre e qualche puntino, **Risografia** è una stampa a due inchiostri, **Pellicola** è la grana della pellicola, **Dithering** scandisce il colore in pixel. Vanno bene per cibo, artigianato, libri e tutto ciò che deve sembrare fatto a mano. Nascondono anche il banding, le strisce che compaiono nelle sfumature morbide, come spiegano le [sfumature granulose](https://gradiently.design/it/guide/grainy-gradients).

## Come si impilano i livelli

Un Mark ha un livello di base e fino a due altri sopra. Ogni livello superiore ha la propria opacità e una modalità di fusione (normale, screen, multiply, overlay o soft), la stessa idea dei livelli di un editor di foto. Una ricetta comune è una base ampia come Mesh o Foschia per il campo di colore, un livello strutturale come Lino o Retino per la texture, e un livello di luce come Alone o Spiraglio per mettere a fuoco.

```css
.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}
```

Tre livelli impilati in CSS, il più alto per primo: la stessa struttura di base, texture e luce che usa un Mark, nella forma più semplice.

## Luce, grana e movimento

Dentro ogni livello, una manciata di impostazioni cambia il comportamento del materiale: la scala, quanto si deforma, quanto dettaglio fine mostra, quanto è illuminato, quanta grana ha sopra e quanto si muove. La stessa Seta può essere uno scintillio stretto e luminoso o un ampio drappo scuro. Il movimento è condiviso dal Mark, con la propria velocità e deriva, così i livelli si muovono insieme e non l’uno contro l’altro.

Un design verticale calmo con una sfumatura morbida e ampia e una sola parola, Quieto

Un Mark calmo: struttura ampia e luce delicata lasciano molto spazio alle parole.

Un design verticale vivido con texture dettagliata e luminosa e una sola parola, Forte

Un Mark più vivace: dettaglio più fine e luce più forte vanno bene per lanci ed eventi.

Dettaglio e parole competono, ed è per questo che i Mark attenuano da soli il dettaglio affollato vicino al testo. Un Mark sa dove sono le parole: la sua zona più calma si sposta dietro il testo e i colori vicino alle lettere si approfondiscono o si schiariscono, così anche un materiale con texture mantiene leggibile il tuo titolo.

## Come scegliere un materiale

### Calmo, quotidiano

- Mesh, Foschia, Limo, Lino, Fibra
- Forme ampie, poco dettaglio
- Facile dietro titoli lunghi
- Adatto a post quotidiani e menu

### Di impatto, occasionale

- Aurora, Neon, Cromo, Disturbo digitale, Lamina olografica
- Luce forte, struttura fine
- Meglio con pochissime parole
- Adatto a lanci, eventi, copertine

Chiediti di cosa è fatto il tuo brand. Una panetteria è farina, carta e luce calda, quindi Fibra o Velatura. Uno studio che vende software è vetro e luce pulita, quindi Satinato o Prisma. Poi chiediti quanto spesso pubblicherai su di esso: più spesso, più calmo dovrebbe essere. [Come scegliere il Mark giusto](https://gradiently.design/it/guide/pick-the-right-mark) percorre il resto della decisione, e il Mercato permette di filtrare direttamente per materiale.

## FAQ

### Che cos’è un materiale di sfumatura?

La struttura che i colori di una sfumatura riempiono, come una lucentezza, un bagliore, una trama o una pietra. Decide se il colore si legge come seta, vetro, carta o luce.

### Quanti livelli può avere un Mark?

Fino a tre: un livello di base e fino a due altri sopra, ciascuno con la propria opacità e modalità di fusione.

### Qual è la differenza tra seta e aurora?

Seta è una lucentezza direzionale su fili sottili. Aurora è un tendaggio di luce che sale da un bordo luminoso in un cielo scuro.

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

Un po’ di grana raramente lo fa, e nasconde il banding. I Mark attenuano anche il dettaglio affollato dietro le parole, così il testo resta leggibile.

### Posso cercare nel Mercato per materiale?

Sì. Il Mercato si può filtrare per materiale, oltre che per colore, fondo, atmosfera e stile, e cercare con parole come «seta blu».