Il glassmorphism è uno stile di interface design che simula superfici di vetro smerigliato sovrapposte a contenuti colorati. Si riconosce per tre tratti caratteristici: trasparenza con sfocatura dello sfondo, bordi sottili e gradienti vivaci sotto la superficie. Apple lo ha portato mainstream nel 2020 con macOS Big Sur e iOS 14, e dopo cinque anni di evoluzione è uno degli stili UI più riconoscibili del 2026.
In questo articolo: cos'è davvero (al di là dell'estetica), come si implementa correttamente in CSS, esempi reali presi da prodotti che ne fanno uso intelligente, quando ha senso adottarlo nei tuoi progetti e — altrettanto importante — quando va evitato per ragioni di accessibilità o performance.
Cos'è esattamente il glassmorphism
Il glassmorphism è figlio diretto di due correnti precedenti: il flat design (eredità minimale, niente skeumorfismo) e il neumorphism (interesse per tridimensionalità soft). Tecnicamente è caratterizzato da:
- Sfondo semi-trasparente con opacità tipica tra 5% e 30%
- Backdrop blur tra 10px e 40px che sfoca quello che sta sotto
- Border sottile 1px in bianco con opacità 10-30% per definire il bordo della superficie
- Sfondo molto colorato dietro, spesso un gradiente o un'immagine con colori saturi
- Subtle shadow per separare la superficie dal piano
Il risultato è la sensazione di guardare attraverso un vetro smerigliato — da cui il nome glassmorphism. È puramente estetico: non comunica gerarchia o stato come fa lo skeumorfismo, ma rinforza la struttura visiva quando i contenuti sotto sono densi.
Implementazione CSS pulita
Il cuore del glassmorphism è la proprietà CSS backdrop-filter. Ecco un componente glass minimale:
.glass-card {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}Il trucco del saturate(180%) è quello che differenzia un glass vivo da uno spento: aumenta i colori sotto la superficie sfocata, rendendo l'effetto più intenso. Senza saturazione, il blur "spegne" i colori sottostanti.
La compatibilità browser è ottima nel 2026: Chrome, Edge, Safari, Firefox, Brave supportano tutti backdrop-filter. Il prefisso -webkit- resta necessario per Safari su iOS <15. Per browser più vecchi, fornisci un fallback con background opaco.
Esempi reali da prodotti famosi
Apple — macOS e iOS
Apple usa glassmorphism nella sidebar di Finder, nel Control Center, e nelle notifiche di sistema. Il caso macOS è interessante perché il blur è dinamico: si adatta al wallpaper sottostante. Questo richiede che l'OS conosca il contenuto sotto la superficie — un livello di integrazione che le web app possono solo approssimare.
Microsoft — Fluent Design (Mica e Acrylic)
Windows 11 introduce Mica e Acrylic, due varianti di glass. Acrylic è il glassmorphism classico (blur + trasparenza). Mica è più leggero: prende il colore dominante del wallpaper e lo applica come tinta opaca, costando meno in performance.
Web — Stripe, Vercel, Linear
Sui prodotti web, Stripe usa pannelli glass nella dashboard. Vercel le usa nei modal e nelle card nelle landing page. Linear le applica nella command palette. Il pattern comune: glass su sfondo colorato animato (gradient o blob), e contenuti sopra altamente leggibili.
Quando ha senso usarlo nei tuoi progetti
Tre scenari in cui il glassmorphism funziona davvero:
1. Card sopra hero immagini ricche. Una landing page con foto a tutto schermo dietro e una card di registrazione sopra: il glass aiuta a separare la card dal contenuto senza nasconderlo del tutto.
2. Sidebar e command palette in app produttività. Quando la sidebar deve coesistere con un canvas pieno (es. Figma, Linear), il glass dà profondità senza occupare visivamente il piano principale.
3. Modali e tooltip. Per overlay temporanei dove vuoi che l'utente percepisca che il contenuto sotto è ancora lì.
Quando va evitato
Tre scenari dove il glassmorphism crea problemi:
1. Form e contenuti testuali densi. La leggibilità peggiora drasticamente quando il testo deve combattere con uno sfondo sfocato e variabile. WCAG 2.2 richiede contrasto minimo 4.5:1 sul testo — molto difficile da garantire su glass se lo sfondo cambia.
2. Schermi a bassa risoluzione o bassa luminosità. Il blur consuma risorse della GPU, e su monitor entry-level o batterie quasi scariche, l'effetto può creare lag o consumo energetico extra.
3. Brand seri o conservatori. Banche, istituzioni, contesti professionali rischiano di sembrare frivoli con glassmorphism. Il vetro smerigliato comunica "consumer", non "enterprise".
Accessibilità — i 3 must-have
Glassmorphism e accessibilità hanno una relazione tesa. Per non escludere utenti:
- Testo sempre con sufficiente contrasto. Test ogni combinazione testo/sfondo con tool come Stark o WebAIM Contrast Checker. Non fidarti dell'occhio.
- Rispetta
prefers-reduced-transparency. Da iOS 13 e Windows 10, gli utenti possono richiedere riduzione della trasparenza per ragioni di accessibilità. CSS supporta la media query@media (prefers-reduced-transparency: reduce)per fornire un fallback opaco. - Fallback opaco per browser che non supportano backdrop-filter. Il 5% di utenti su browser più vecchi merita un'esperienza usabile.
Come prototiparlo in Figma
Figma supporta glassmorphism nativamente da dopo il 2022:
- Crea un rettangolo, riempilo con bianco, abbassa l'opacità a 12-15%
- Aggiungi Background blur con valore 20-30 (sezione "Effects")
- Aggiungi un border 1px in bianco al 20% di opacità
- Applica una soft drop shadow sotto
Il limite di Figma rispetto al codice: il blur è statico (non vede il contenuto effettivo), quindi i prototipi rendono il glass meno "vivo" di come apparirà in produzione. Per validare l'aspetto reale, esporta in HTML/CSS o usa il plugin Figma Make.
Domande frequenti
Il backdrop-filter rallenta le animazioni?
Sì, leggermente. Il blur è una operazione GPU-intensive. Su elementi che animano (drag, scale, opacity changes) può causare jank a 30 FPS invece di 60. Soluzione: applica will-change: transform per anticipare la GPU, e considera backface-visibility: hidden.
Funziona bene su mobile?
iOS lo gestisce nativamente da iOS 8 (Safari ha il supporto migliore). Android Chrome è funzionale ma su device entry-level il blur a >20px rallenta lo scrolling. Considera blur 10-15px sul mobile.
Glassmorphism vs neumorphism: quale preferire?
Il neumorphism ha avuto il suo momento ma soffre di problemi di contrasto strutturali. Il glassmorphism è più versatile: funziona bene su sfondi colorati, mentre il neumorphism richiede sfondo monocromatico. Nel 2026, glass vince in adozione.
Come funziona in dark mode?
Bene se progettato per. Sfondo nero/dark con blur + accent colorati produce un effetto "premium". Cambia il colore del border da bianco a chiaro (es. rgba(255,255,255,0.1)) e rivedi il contrasto del testo.
È un trend destinato a passare?
I trend visivi durano in media 5-7 anni nel digital design (cfr. flat design 2013-2019). Glassmorphism è arrivato nel 2020-2021. Ci aspettiamo che resti rilevante fino al 2027-2028, poi sarà in declino. Adottalo se aggiunge valore concreto, non solo per moda.
Prossimi passi
Imparare a usare glassmorphism (e altri trend UI) in modo professionale richiede solide fondamenta di visual design — gerarchia, contrasto, tipografia, sistema di colori. Il Corso di UI & Visual Design di CorsoUX copre 12 capitoli con 101 lezioni: dalla teoria alla pratica con Figma, fino a costruire un design system completo. Mentor 1:1 corregge ogni esercizio.
Per approfondire trend e principi UI, leggi anche come progettare animazioni UI efficaci, come scegliere i font per l'interfaccia e i 7 principi della Gestalt applicati al design.
