Generatore di glassmorfismo CSS

Cos'è il glassmorphism?

Il glassmorphism è una tendenza di design dell'interfaccia che presenta elementi simili a vetro smerigliato che lasciano intravedere lo sfondo attraverso un effetto di sfocatura. Usa la proprietà CSS backdrop-filter: blur(), sfondi semi-trasparenti e bordi sottili per un look moderno e a strati. È popolare nelle interfacce di dashboard, nelle card e nelle modali.

Compatibilità dei browser

backdrop-filter è supportato in tutti i browser moderni: Chrome, Edge, Safari e Firefox 103+. Per le versioni più vecchie di Firefox, prevedi un colore di sfondo pieno come fallback.

Come funziona

1. Scegli un colore di sfondo. Il vetro ha bisogno di qualcosa dietro di sé per essere visibile. Scegli uno sfondo pieno, un gradiente o una foto per l'area di anteprima così da poter giudicare come si leggerà la sfocatura nel tuo layout reale.
2. Imposta la sfocatura e la saturazione. Il raggio di sfocatura simula la dispersione della luce del vetro smerigliato; la saturazione porta in avanti i colori da dietro il pannello. La classica ricetta in stile Apple è circa blur(10px) saturate(180%).
3. Regola il colore e la trasparenza del vetro. Lo sfondo dell'elemento stesso deve essere parzialmente trasparente, un colore opaco blocca del tutto lo sfondo. Bianco o nero al 10-30% di alfa è il punto di partenza tipico.
4. Regola il bordo e il raggio degli angoli. Un bordo bianco sottilissimo a bassa alfa imita la luce del bordo interno del vetro fisico. Un border-radius attorno a 12-20px dà l'aspetto a scheda morbida che la maggior parte dei design glassmorphism usa.
5. Copia il CSS. Incolla il blocco di proprietà generato nel tuo foglio di stile. Aggiungi la riga complementare -webkit-backdrop-filter se hai bisogno di supportare i vecchi Safari.

Da dove viene il termine

Il risultato visivo è più vecchio dell'etichetta. Apple introdusse sfondi sfocati in tempo reale per i pannelli di notifica e il Centro di Controllo con iOS 7 nel 2013 e lo portò sul desktop con macOS Yosemite l'anno successivo, il team di WebKit distribuì la proprietà CSS backdrop-filter ad agosto 2015 proprio perché, come dice il suo post di lancio, «il linguaggio di progettazione dell'interfaccia utente per iOS 7 e OS X Yosemite è cambiato per incorporare bei effetti di sfocatura dello sfondo.» Il precedente «Aero Glass» (2007) di Windows Vista di Microsoft era la stessa idea, e Microsoft documenta due materiali correlati nel moderno sistema Fluent: Acrylic (traslucido, sfocato, con una sovrapposizione di rumore) e Mica (una variante opaca tinteggiata in base al desktop introdotta con Windows 11). Il nome unico «glassmorphism» fu coniato dal designer polacco Michał Malewicz di Hype4 Academy nel novembre 2020, di pari passo con l'uscita di macOS Big Sur, la coerenza di denominazione, nella stessa famiglia del precedente «neumorphism», diede ai designer un vocabolario condiviso per discutere la tecnica.

La ricetta CSS

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Tre cose da interiorizzare sulla ricetta. Primo, lo sfondo dell'elemento stesso deve essere trasparente o parzialmente trasparente, MDN lo afferma chiaramente: «L'elemento o il suo sfondo devono essere trasparenti o parzialmente trasparenti perché l'effetto sia visibile.» Un background-color completamente opaco copre il campione sfocato e l'utente vede un pannello piatto. Secondo, l'effetto ha bisogno di qualcosa dietro da sfocare, il glassmorphism non funziona sopra una pagina bianca uniforme. Terzo, il Safari moderno accetta la proprietà senza prefisso, ma qualsiasi versione più vecchia di Safari 17 ha bisogno sia di backdrop-filter sia del gemello -webkit-backdrop-filter.

Tutte e dieci le funzioni di filtro

backdrop-filter è definito nel W3C Filter Effects Module Level 2 e accetta le stesse dieci funzioni di filtro della normale proprietà filter: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() e sepia(). Possono essere concatenate, e l'ordine conta, vengono applicate da sinistra a destra sul campione di sfondo. Per il glassmorphism, blur() più saturate() copre l'aspetto canonico; tutto il resto è una regolazione creativa (ad es. brightness(105%) su sfondi scuri per sollevare il campione sfocato, o contrast(120%) per mantenere nitidi i rapporti tra i colori).

Supporto dei browser e il prefisso -webkit-

Nel 2026 la proprietà è supportata in ogni browser evergreen. WebKit la distribuì per primo il 10 agosto 2015 con Safari 9 / iOS 9, dietro il prefisso -webkit-backdrop-filter. Chrome aggiunse il supporto senza prefisso nella versione 76 (luglio 2019), Edge seguì con il passaggio a Chromium alla versione 79, e Firefox 103 l'abilitò senza flag il 26 luglio 2022. MDN contrassegna la proprietà come Baseline 2024 (di nuova disponibilità da settembre 2024), il che significa che tutti e quattro i principali motori ora interoperano. Il supporto nel mondo reale si attesta attorno al 95% globale. Per coprire le build di Safari più vecchie (e gli utenti di PostCSS), includi sia le dichiarazioni con prefisso sia quelle senza una accanto all'altra oppure lascia che autoprefixer aggiunga il prefisso dalla tua configurazione Browserslist.

Un ripiego per i browser che non lo supportano

Usa una query @supports così i browser che non lo supportano ottengono un ripiego pieno invece di un pannello trasparente illeggibile:

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

Prestazioni: quando usarlo (e quando no)

backdrop-filter è accelerato dalla GPU, ma non è gratuito. Ogni superficie filtrata costringe il browser a mantenere un livello di compositing separato e a ricampionare l'area dietro l'elemento. La bozza dell'editore del W3C lo riconosce direttamente, segnalando che i filtri di sfondo annidati o impilati possono causare «passaggi di rendering esponenziali», e il post di lancio di WebKit avverte che la proprietà «costringe il motore a eseguire più passaggi di rendering, il che avrà un impatto sulle prestazioni.» Il conciso riassunto di Web.dev si applica: «backdrop-filter può danneggiare le prestazioni. Testalo prima di distribuire.»

Regole pratiche: mantieni i raggi di sfocatura sotto i ~20px nel codice di produzione, evita le superfici di vetro a tutto schermo (una barra di navigazione di vetro che si ridisegna a ogni scorrimento è il classico colpevole), non impilare molte superfici filtrate una sopra l'altra, ed evita backdrop-filter sugli elementi <video> dove la sfocatura deve ricalcolarsi a ogni fotogramma. Microsoft dice agli utenti di Acrylic più o meno la stessa cosa nella documentazione Fluent: «Gli effetti Acrylic vengono disabilitati automaticamente quando un dispositivo entra in modalità Risparmio batteria».

Accessibilità: la trappola del contrasto

Il glassmorphism per definizione abbassa il contrasto tra il testo e il suo sfondo, perché lo «sfondo» sotto il pannello è ora qualunque cosa si trovi dietro di esso, e questo varia man mano che l'utente scorre o cambia sfondo. I minimi WCAG 2.1 pertinenti (4,5:1 per il testo normale del corpo, 3:1 per il testo grande o in grassetto) devono essere rispettati rispetto allo sfondo nel caso peggiore, non alla media. Guida pratica: tieni il testo del corpo fuori dai pannelli di vetro e usali principalmente per la cornice (schede, intestazioni, modali) dove la lettura effettiva avviene contro una superficie interna più opaca. Fornisci sempre una variante con ripiego opaco per gli utenti che hanno disattivato la trasparenza a livello di sistema operativo, sia macOS (Impostazioni di Sistema → Accessibilità → Schermo → Riduci trasparenza) sia Windows (Impostazioni → Personalizzazione → Colori → Effetti trasparenza) espongono l'interruttore, e il CSS può rilevarlo:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Dove il glassmorphism funziona bene, e dove no

• Buoni abbinamenti: barre di navigazione fluttuanti sopra immagini di primo piano, schede di dashboard sopra uno sfondo a gradiente colorato, finestre di dialogo modali che si sovrappongono a contenuti ricchi, widget in stile schermata di blocco, sovrapposizioni video dove la cornice del lettore trae vantaggio dall'ammorbidire l'immagine dietro di essa.
• Rischioso: contenitori di testo del corpo (il contrasto varia man mano che l'utente scorre), tabelle di dati (il rumore visivo interferisce con la scansione delle righe), superfici a tutto schermo (calo delle prestazioni), interfacce rivolte a utenti ipovedenti a meno che non siano abbinate a un ripiego a trasparenza ridotta.
• Da evitare: i pulsanti principali di invito all'azione (la perdita di contrasto danneggia la conversione), i pannelli di errore o avviso (hanno bisogno della massima leggibilità), i moduli con molto testo.

Errori comuni

1. Dimenticare lo sfondo trasparente. Impostare backdrop-filter su un elemento con un background-color opaco non produce alcun effetto visibile, il colore opaco copre il campione sfocato. Abbinalo sempre a uno sfondo rgba()/hsla().
2. Vetro sopra un colore piatto. Se non c'è nulla di interessante dietro il pannello, sfocarlo non produce alcun «vetro», solo un rettangolo leggermente tinteggiato. L'effetto ha bisogno di una foto, un gradiente o uno sfondo movimentato per leggersi.
3. Saltare il prefisso -webkit-. Le build di Safari più vecchie ne hanno bisogno. O distribuisci entrambe le righe o affidati a autoprefixer.
4. Impilare troppi pannelli. Ogni superficie filtrata è un proprio livello GPU. Tre o quattro è di solito il limite pratico prima che la frequenza dei fotogrammi cali su mobile.
5. Non superare la verifica del contrasto nel caso peggiore. Testa il pannello rispetto alle chiazze più chiare e più scure di ogni sfondo su cui si troverà, non solo uno screenshot dimostrativo.
6. Animare il raggio di sfocatura. La transizione backdrop-filter: blur(0) → blur(20px) al passaggio del mouse è tecnicamente consentita ma ricalcola la sfocatura a ogni fotogramma ed è il modo più facile per affossare le prestazioni di scorrimento. Anima invece opacity o transform e lascia la sfocatura statica.

Domande frequenti

Perché la mia scheda di vetro sembra un pannello piatto?

Il background-color dell'elemento stesso è completamente opaco. backdrop-filter sfoca qualunque cosa sia dietro l'elemento, ma l'elemento disegna sopra. Con uno sfondo opaco, quel disegno copre il campione sfocato. Passa a rgba() o hsla() al 10-30% di alfa, il punto ideale per la maggior parte dei design glassmorphism.

Funzionerà in Safari?

Sì, Safari è stato il primo browser a distribuire la proprietà, ad agosto 2015. Le versioni più vecchie di Safari hanno bisogno del prefisso -webkit-backdrop-filter; il Safari moderno accetta la forma senza prefisso. Includere entrambe fa funzionare lo stesso CSS su ogni build di Safari ancora in uso attivo.

Il glassmorphism è accessibile?

Solo se progetti per lo sfondo nel caso peggiore. Le WCAG 2.1 richiedono un rapporto di contrasto di 4,5:1 per il testo normale e di 3:1 per i componenti dell'interfaccia grandi o in grassetto, misurato rispetto a qualunque colore finisca sotto il pannello. Fornisci un ripiego opaco sotto la media query prefers-reduced-transparency così gli utenti che hanno disattivato la trasparenza a livello di sistema operativo ottengono una superficie leggibile.

Danneggia le prestazioni?

Può farlo. Ogni superficie filtrata costringe il browser a mantenere un livello di compositing separato e a ricampionare l'area dietro di essa, e raggi di sfocatura grandi o pannelli impilati aggravano il costo. Mantieni il raggio sotto i 20px circa, evita i pannelli a tutto schermo, e non metterlo sopra <video>. La guida ufficiale di Web.dev è di testare su un dispositivo di fascia bassa rappresentativo prima di distribuire.

Qual è la differenza tra glassmorphism e neumorphism?

Il neumorphism (coniato qualche mese prima) crea l'illusione di morbide forme in rilievo di plastica combinando ombre interne ed esterne sullo stesso colore piatto dello sfondo della pagina, nessuna trasparenza, nessuna sfocatura. Il glassmorphism mantiene lo sfondo della pagina visibile attraverso un pannello traslucido e sfocato. Sono stili complementari anziché concorrenti, e alcuni design usano entrambi: un pulsante neumorfico su una scheda di vetro, per esempio.

Posso copiare il CSS per l'uso in produzione?

Sì. L'output è CSS semplice che usa proprietà standard, nessuna estensione proprietaria, nessun JavaScript. Inserisci la regola nel tuo foglio di stile e applica la classe a qualunque elemento debba sembrare vetro.

Strumenti correlati