# Glassmorphism e gradienti: una guida pratica

[Canonical HTML page](https://gradiently.design/it/guide/glassmorphism)

Il vetro smerigliato su un gradiente luminoso è uno degli effetti più attraenti del design delle interfacce, e uno dei più facili da rendere illeggibile. Ecco come ottenere la bellezza e conservare le parole.

## The short version

- Il glassmorphism è uno stile di interfaccia che usa pannelli traslucidi e sfocati, come vetro smerigliato, sovrapposti a sfondi colorati.
- L’effetto dipende dallo sfondo: il vetro smerigliato su un colore piatto sembra una scatola grigia, mentre il vetro su un gradiente ricco brilla.
- Il suo problema principale è il contrasto, perché il testo sul vetro sta su qualsiasi colore ci sia dietro, che può cambiare mentre la pagina scorre.
- In CSS, il glassmorphism si costruisce con la sfocatura backdrop-filter, un riempimento semitrasparente, un bordo sottile e chiaro e un ripiego per i browser che non lo supportano.
- Il vetro funziona meglio per pochi livelli flottanti, come navigazione, card e finestre di dialogo, non per ogni superficie di una pagina.

Il **glassmorphism** è uno stile di design costruito sul vetro smerigliato: pannelli traslucidi che sfocano tutto ciò che sta dietro, sovrapposti a uno sfondo colorato, di solito un gradiente. Il pannello conserva una traccia del colore sottostante, un bordo sottile e luminoso cattura la luce e l’intera interfaccia sembra a strati e fisica. I sistemi operativi usano materiali traslucidi da anni, e nel 2025 Apple ha messo il vetro al centro del suo nuovo linguaggio di design Liquid Glass, quindi questo aspetto non sparirà. Usato senza cura, però, produce scatole grigie e testo illeggibile.

## Perché il glassmorphism ha bisogno di un gradiente

Il vetro smerigliato sembra vetro solo quando dietro c’è qualcosa di colorato da sfocare. Su uno sfondo piatto bianco o grigio, un pannello di vetro è solo un grigio un po’ diverso. Su un gradiente ricco, con macchie di colore in punti diversi, il pannello raccoglie un colore morbido che cambia da un bordo all’altro, e quel cambiamento è ciò che l’occhio legge come vetro. Il gradiente non è quindi una decorazione: è metà dell’effetto.

- Viola che sfuma nel ciano: `radial-gradient(circle at 20% 25%, #8b5cf6 0%, #4c1d95 25%, #0e7490 55%, #0f172a 90%)`
- Bagliore rosa su indaco: `radial-gradient(circle at 75% 20%, #f472b6 0%, #7c3aed 35%, #1e1b4b 75%)`
- Tramonto sotto il vetro: `radial-gradient(ellipse at 30% 80%, #fb923c 0%, #db2777 35%, #3b0764 80%)`

Sfondi che danno al vetro qualcosa da catturare: macchie di colore distinte invece di una sfumatura liscia e uniforme.

I migliori sfondi per il vetro hanno aree di colore forti e separate e una base scura o profonda, un po’ come i [gradienti mesh](https://gradiently.design/it/guide/mesh-gradients) o i [gradienti aurora](https://gradiently.design/it/guide/aurora-gradients). Metti la macchia più luminosa in modo che stia in parte dietro un pannello; il pannello brillerà dove si sovrappone.

## Il CSS dietro il glassmorphism

Il cuore dell’effetto è `backdrop-filter`, che applica un filtro a tutto ciò che sta dietro un elemento invece che all’elemento stesso. Combinalo con un riempimento semitrasparente, un bordo sottile e traslucido e un’ombra morbida. Le versioni attuali dei principali browser lo supportano, e le versioni più vecchie di Safari richiedono il prefisso `-webkit-`; vedi [MDN su backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) e [caniuse](https://caniuse.com/css-backdrop-filter).

```css
.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: #ffffff;
}

/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(15 23 42 / 0.88); }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 23 42 / 0.92); }
}
```

Un pannello smerigliato con un ripiego. `saturate()` mantiene vivace il colore sfocato invece di sbiadirlo.

| Proprietà | Valore di partenza | Cosa controlla |
| --- | --- | --- |
| Sfocatura | Da 16 a 30 px | Quanto si dissolve lo sfondo. Se è poca, i dettagli traspaiono attraverso il testo |
| Opacità del riempimento | Dal 10 al 25% di bianco, o dal 40 al 70% di scuro | Quanto il pannello si stacca dallo sfondo |
| Saturazione | Da 120 a 160% | Mantiene vivido il colore sfocato invece di grigio |
| Bordo | 1 px al 15-30% di bianco | Il bordo luminoso che vende il vetro |
| Ombra | Grande, morbida, a bassa opacità | Solleva il pannello dallo sfondo |

Punti di partenza da regolare a occhio. Una sfocatura più forte e un riempimento più deciso sono sempre più sicuri per il testo.

## Glassmorphism e contrasto

Il problema più grande del vetro è che il suo testo sta su qualsiasi cosa ci sia dietro il pannello. Un titolo che si legge bene su una zona indaco scuro può sparire quando il pannello scorre su un bagliore rosa pallido. Il contrasto deve reggere nel caso peggiore, non in quello del tuo mockup. Le WCAG chiedono 4,5:1 per il testo corrente; verificalo nel punto più chiaro che può mai stare dietro le parole.

### Vetro illeggibile

- Sfocatura leggera, così le forme dietro traspaiono attraverso le lettere
- Riempimento molto trasparente su uno sfondo luminoso
- Testo bianco sottile e leggero
- Pannelli di vetro che scorrono su contenuti che cambiano

### Vetro leggibile

- Sfocatura di 16 px o più, così lo sfondo si dissolve
- Un riempimento colorato abbastanza forte da garantire il contrasto
- Pesi medium o grassetto per il testo sul vetro
- Vetro fisso su uno sfondo noto e controllato

Un trucco affidabile è colorare il vetro verso il colore più scuro dello sfondo invece di usare il bianco. Un vetro indaco scuro al 50% su un gradiente indaco e rosa mantiene leggibile il testo bianco ovunque, lasciando comunque trasparire il colore. Per altri modi di tenere chiare le parole, vedi [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient).

## Quando il glassmorphism aiuta, e quando no

- **Aiuta:** navigazione flottante, finestre di dialogo, controlli multimediali, card sopra una hero e widget in stile schermata di blocco, dove il livello deve sembrare sopra il contenuto
- **Aiuta:** pagine di prodotto e di lancio in cui il gradiente è il brand e il vetro lo mette in mostra
- **Danneggia:** moduli, tabelle e letture lunghe, dove le persone hanno bisogno di un contrasto calmo e costante
- **Danneggia:** pagine con molti livelli di vetro impilati, che sembrano sporchi e costano in prestazioni
- **Danneggia:** ovunque lo sfondo sia piatto o pieno di foto e testo piccolo

## Come progettare un’interfaccia di vetro

1. **Progetta prima lo sfondo** Scegli un gradiente con macchie di colore separate su una base profonda. Il vetro sarà buono solo quanto ciò che ha dietro.
2. **Limita il vetro a uno o due livelli** Navigazione e un livello di card bastano e avanzano. Vetro su vetro su vetro diventa grigio.
3. **Sfoca abbastanza da dissolvere i dettagli** Se riesci ancora a distinguere le forme dietro il pannello, aumenta la sfocatura prima di ogni altra cosa.
4. **Colora per il contrasto** Scegli il colore e l’opacità del riempimento che mantengono leggibile il testo sulla parte più chiara dello sfondo.
5. **Aggiungi un bordo chiaro e un’ombra morbida** Un bordo traslucido di 1 px e un’ombra ampia e tenue fanno sembrare il pannello un foglio fisico.
6. **Prova le prestazioni su un telefono** La sfocatura dello sfondo è costosa da disegnare. Mantieni modeste le aree sfocate ed evita di animarle su superfici grandi.

Il vetro è uno dei tanti materiali che un gradiente può indossare; la [texture del gradiente](https://gradiently.design/it/guide/gradient-texture) lo confronta con grana, carta e seta. Se vuoi uno sfondo che abbia già le macchie, la profondità e la luce di cui il vetro ha bisogno, molti Mark del Mercato sono costruiti così, e puoi progettare con qualsiasi di loro gratis.

## FAQ

### Cos’è il glassmorphism?

Il glassmorphism è uno stile di design che usa pannelli traslucidi di vetro smerigliato con sfondi sfocati, un bordo chiaro e un’ombra morbida, sovrapposti a gradienti colorati.

### Come faccio un effetto vetro in CSS?

Usa `backdrop-filter: blur()` con un colore di sfondo semitrasparente, un bordo sottile e traslucido e un’ombra morbida, più il prefisso `-webkit-` per i Safari più vecchi.

### Il glassmorphism è accessibile?

Può esserlo, se la sfocatura è forte, il riempimento è abbastanza colorato da mantenere il testo a un contrasto di 4,5:1 sulla parte più chiara dello sfondo e c’è un ripiego pieno.

### Perché il mio pannello di vetro sembra grigio?

Lo sfondo dietro è troppo piatto. Il vetro ha bisogno di aree di colore forti e separate dietro di sé da catturare.

### backdrop-filter peggiora le prestazioni?

Costa più di un normale sfondo, soprattutto su aree grandi o durante le animazioni. Usalo per pochi pannelli e prova sui telefoni.