Generatore di Glassmorfismo
Crea effetti CSS glassmorphism con controlli visivi. Regola opacita, sfocatura e saturazione per UI in vetro smerigliato.
Funzionalita principali
- Opacità, sfocatura e saturazione regolabili
- Selezione del colore di tinta personalizzato
- Anteprima live su sfondi a gradiente
- Output CSS pronto da copiare
Guide
Il glassmorphism è uno stile di design visivo in cui gli elementi UI appaiono come pannali di vetro smerigliato fluttuanti su uno sfondo colorato. L'effetto si affida a tre proprietà CSS che lavorano insieme: trasparenza dello sfondo (rgba o hsla con alfa basso), sfocatura dello sfondo (backdrop-filter: blur()) e un bordo o un'ombra sottile che definisce il bordo del pannello. Lo stile ha guadagnato promin nel 2020 con macOS Big Sur di Apple e da allora è diventato un pilastro nel design UI web e mobile moderno. Questa guida illustra l'implementazione tecnica, le implicazioni sulle prestazioni, i principi di design e i pattern pratici per usare il glassmorphism in modo efficace. Il CSS di base per un pannello glassmorphism richiede tre dichiarazioni. Primo, uno sfondo semi-trasparente: background: rgba(255, 255, 255, 0.15) per un effetto vetro chiaro o background: rgba(0, 0, 0, 0.25) per un effetto vetro scuro. Secondo, una sfocatura dello sfondo: backdrop-filter: blur(12px). Terzo, un bordo che cattura la luce: border: 1px solid rgba(255, 255, 255, 0.2). La combinazione di sfondo trasparente, sfondo sfocato e bordo luminoso crea l'illusione del vetro smerigliato. Senza uno qualsiasi di questi tre componenti, l'effetto fallisce. Uno sfondo trasparente senza sfocatura sembra una sovrapposizione colorata. La sfocatura senza trasparenza non mostra nulla dietro l'elemento. E senza un bordo, i bordi del pannello scompaiono nello sfondo. La proprietà backdrop-filter applica effetti grafici all'area dietro un elemento. Supporta le stesse funzioni di filtro della proprietà CSS filter: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() e drop-shadow(). Per il glassmorphism, blur() è la funzione principale. Il raggio di sfocatura controlla l'intensità dell'effetto smerigliato: blur(4px) crea una morbidezza sottile, blur(12px) crea un smeriglio medio e blur(24px) crea un smeriglio pesante in cui i dettagli dello sfondo sono appena visibili. Puoi combinare più funzioni: backdrop-filter: blur(12px) saturate(180%) aggiunge vivacità del colore allo sfondo sfocato, facendo apparire i colori dietro il vetro più vividi. Il valore del raggio di sfocatura determina quanto appare vitreo rispetto a solido il pannello. Valori più bassi (4-8 px) mantengono più dettagli dello sfondo e sembrano più leggeri. Valori medi (10-16 px) creano il classico aspetto del vetro smerigliato. Valori più alti (20 px+) oscurano lo sfondo quasi interamente, punto in cui perdi la metafora del vetro e il pannello sembra una superficie traslucida solida. Per la maggior parte delle applicazioni UI, 8-16 px colpisce il giusto equilibrio tra interesse visivo e leggibilità del contenuto. Testa il raggio di sfocatura scelto con il tuo contenuto di sfondo effettivo per verificare che l'effetto funzioni come previsto. L'alfa dello sfondo (trasparenza) lavora in tensione con il raggio di sfocatura. Uno sfondo con alfa molto basso (0,05-0,10) mostra più dello sfondo sfocato, creando una sensazione più leggera e trasparente. Uno sfondo con alfa più alto (0,25-0,40) oscura più dello sfondo, creando una sensazione più solida e opaca. La combinazione giusta dipende da cosa siede dietro il pannello di vetro. Su uno sfondo occupato e colorato, alfa più alto e sfocatura più forte assicurano che il testo rimanga leggibile. Su uno sfondo semplice e smorzato, alfa più basso e sfocatura più leggera creano un effetto più elegante. Non c'è una singola combinazione corretta. Ciascun contesto di design richiede test per trovare l'equilibrio tra effetto visivo e usabilità. Bordo e ombra definiscono il bordo del pannello di vetro e sono essenziali perché l'illusione funzioni. Senza un bordo, il pannello si fonde con i suoi dintorni e perde la sua qualità dimensionale. Un bordo sottile usando rgba(255, 255, 255, 0.18) su un pannello di vetro chiaro o rgba(255, 255, 255, 0.08) su un pannello di vetro scuro simula la luce che colpisce il bordo del vero vetro. Box-shadow aggiunge profondità: box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) per un'ombra leggera o box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) per un'elevazione più drammatica. L'ombra rafforza che il pannello fluttua sopra lo sfondo. Alcune implementazioni aggiungono una seconda ombra interna per dimensione aggiuntiva. Le prestazioni di backdrop-filter sono la considerazione più importante per l'uso in produzione. La sfocatura dello sfondo è intensiva per la GPU perché il browser deve renderizzare il contenuto dietro l'elemento, applicare il filtro di sfocatura a quel contenuto renderizzato, poi comporre il risultato sfocato sotto l'elemento semi-trasparente. Questo accade ogni frame se qualcosa dietro il pannello di vetro cambia (scorrimento, animazioni, video). Su GPU desktop di fascia alta, questo è fluido. Su dispositivi mobile di fascia bassa, può causare significativi frame drop e consumo batteria. Il costo di prestazioni scala con il raggio di sfocatura e l'area da sfocare. Una piccola card di vetro con blur(8px) è molto più economica di una barra di navigazione a vetro a larghezza piena con blur(20px). Le strategie di ottimizzazione delle prestazioni includono limitare il numero di elementi di vetro visibili contemporaneamente (evita di mettere pannelli di vetro su ogni card in una griglia di 50 elementi), ridurre il raggio di sfocatura su mobile (blur(8px) invece di blur(20px) su schermi più piccoli), evitare effetti di vetro su sfondi animati o video su mobile e usare will-change: backdrop-filter come hint al browser per preparare le risorse GPU. Puoi anche usare la proprietà contain: paint sull'elemento di vetro per limitare lo scope di composizione. Testa su dispositivi di fascia bassa reali, non solo sulla tua macchina di sviluppo. Un effetto di vetro che performa bene su un MacBook Pro potrebbe balbettare su un telefono Android economico con una GPU Adreno 505. Il supporto dei browser per backdrop-filter è ora ampio. Chrome, Edge, Safari e Firefox lo supportano tutti. Il prefisso -webkit- (-webkit-backdrop-filter) è ancora necessario per le versioni di Safari precedenti alla 18. Internet Explorer non lo supporta. Per i browser senza supporto, il fallback è uno sfondo semi-trasparente solido senza sfocatura. Definisci questo come predefinito e sovrapponi la sfocatura: background: rgba(255, 255, 255, 0.7) come fallback (più opaco per mantenere la leggibilità senza sfocatura), poi @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); } per i browser capaci. Il fallback mantiene l'usabilità a spese dell'effetto di vetro. Uno snippet CSS glassmorphism completo è così. Per gli stili di base: background: rgba(255, 255, 255, 0.7) come fallback per i browser senza supporto backdrop-filter. Poi dentro un blocco @supports: background: rgba(255, 255, 255, 0.15), seguito da backdrop-filter: blur(12px) e -webkit-backdrop-filter: blur(12px). Fuori dal blocco @supports, aggiungi border: 1px solid rgba(255, 255, 255, 0.2), box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) e border-radius: 16px. Questo pattern copre tutti i browser con degradazione elegante. La temperatura del colore dell'effetto di vetro imposta l'umore. Il vetro caldo usa sfondi leggermente tinturati: rgba(255, 200, 150, 0.15) aggiunge una tinta ambrata calda. Il vetro freddo usa tinte blu: rgba(100, 150, 255, 0.15). Il vetro neutro usa bianco o nero a varie opacità. La tinta interagisce con qualsiasi colore sia dietro il vetro, quindi il colore percepito cambia man mano che lo sfondo cambia. Questa qualità dinamica è parte di ciò che fa sentire il glassmorphism vivo e reattivo al contesto. Per vetro colorato dal marchio, usa il colore del tuo marchio a alfa molto basso (0,05-0,15) per mantenere l'effetto traslucido rafforzando l'identità del marchio. Il glassmorphism in modalità scura inverte l'approccio. Invece di vetro chiaro su uno sfondo colorato, usa vetro scuro (rgba(0, 0, 0, 0.40) o rgba(17, 25, 40, 0.60)) con un bordo più chiaro (rgba(255, 255, 255, 0.08)). La sfocatura dello sfondo funziona allo stesso modo. I pannelli di vetro scuro sembrano sofisticati su sfondi scuri con gradienti di colore sottili o effetti di luce ambientale. Il Control Center di Apple su iOS è un esempio canonico di glassmorphism scuro. Per la modalità scura, il cambio del colore del bordo è importante: passa dai bordi bianchi a versioni leggermente più chiare dello sfondo scuro per mantenere il bordo del vetro senza che il bordo appaia troppo brillante. La leggibilità del testo sui pannelli di vetro richiede attenzione attenta perché è qui che il glassmorphism fallisce più comunemente. Lo sfondo semi-trasparente e sfocato significa che il colore effettivo dello sfondo cambia a seconda di cosa è dietro il pannello. Il testo bianco potrebbe essere leggibile quando il pannello è sopra un'area scura dello sfondo ma illeggibile quando si sposta su un'area chiara (durante lo scorrimento, per esempio). Le soluzioni includono usare un alfa dello sfondo più alto per assicurare un contrasto minimo indipendentemente da cosa è dietro, aggiungere un text-shadow per separazione extra (text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)), usare pesi di carattere più grassi (600 o 700 invece di 400) e assicurare che lo sfondo dietro i pannelli di vetro sia controllato e non troppo vario in brillantezza. Il vetro stratificato crea profondità impilando più pannelli di vetro con diversi livelli di sfocatura e opacità. Uno strato di vetro di sfondo con sfocatura pesante e bassa opacità siede dietro un pannello di vetro in primo piano con sfocatura più leggera e opacità leggermente più alta. Questo crea un senso di profondità e gerarchia. Apple usa questo ampiamente in macOS e iOS. Implementalo con stratificazione z-index: lo strato di sfondo ha un raggio di sfocatura più alto (blur(20px)) e lo strato in primo piano ha un raggio di sfocatura più basso (blur(8px)) con leggermente più opacità. Tre o più strati sono possibili ma rari, e ciascuno strato aggiunge al costo di rendering. Il glassmorphism funziona meglio per specifici pattern UI: barre di navigazione fluttuanti sul contenuto, finestre di dialogo modali e sovrapposizioni, pannelli di notifica, sidebar, elementi card su sezioni eroe, controlli del media player su copertine di album, elementi tooltip e popover e widget dashboard su visualizzazioni di dati. Funziona male per aree di contenuto denso (testo di articoli, tabelle di dati, form con molti campi) dove lo sfondo che si sposta dietro il vetro distrae dal contenuto. Usa gli effetti di vetro come accenti, non come trattamento di superficie predefinito per tutto sulla pagina. Lo sfondo dietro il pannello di vetro conta quanto il vetro stesso. Il glassmorphism appare meglio su sfondi colorati e gradienti con transizioni morbide. Un gradiente dal viola profondo al blu oceano, o dall'arancio caldo al rosa, fornisce lo sfondo ideale per l'effetto di sfocatura. Il pannello di vetro ammorbidisce e diffonde questi colori splendidamente. Su uno sfondo bianco semplice o nero semplice, l'effetto di vetro è invisibile perché non c'è nulla da sfocare. Su uno sfondo fotografico occupato con dettagli netti, la sfocatura produce un risultato fangoso. Progetta il tuo sfondo e i tuoi pannelli di vetro insieme come un sistema. Combinare il glassmorphism con altri elementi di design potenzia l'effetto. Gradienti sottili sullo sfondo del pannello di vetro (un linear-gradient da rgba(255,255,255,0.2) a rgba(255,255,255,0.05)) aggiungono luce direzionale. Ombre interne (box-shadow: inset 0 1px 0 rgba(255,255,255,0.2)) simulano la luce che colpisce il bordo superiore del vetro. Border-radius ammorbidisce il pannello (16-24 px è comune nei design glassmorphism). Insieme, questi dettagli fanno sentire il vetro più fisico e tridimensionale. L'animazione con elementi di vetro dovrebbe essere fluida e mirata. Fai dissolvere i pannelli di vetro con transizioni di opacità. Falli scorrere in posizione con traslazioni di transform. Evita di animare il valore blur di backdrop-filter stesso, poiché cambiare il raggio di sfocatura ogni frame costringe il browser a rigenerare lo sfondo sfocato, il che è estremamente costoso. Se hai bisogno di un'animazione di sfocatura, considera animare uno strato di sfondo sfocato separato usando CSS filter: blur() su uno pseudo-elemento, che è più facile da ottimizzare per i browser rispetto a backdrop-filter. Le animazioni transform e opacità sugli elementi di vetro performano bene perché non richiedono di ricalcolare la sfocatura. L'integrazione del glassmorphism nel sistema di design richiede di definire un set di token di vetro: colori di sfondo del vetro a opacità chiare e scure, colori del bordo del vetro, valori dell'ombra del vetro e raggi di sfocatura del vetro per contesti diversi. Crea classi CSS riutilizzabili o varianti di componente: .glass-light, .glass-dark, .glass-subtle, .glass-prominent. Documenta quali varianti di vetro funzionano su quali tipi di sfondo. Questo previene l'inconsistenza di valori di vetro ad hoc attraverso la base di codice e assicura che l'effetto si degradi coerentemente nei browser non supportati. Il glassmorphism in React, Vue e altri framework di componenti è in genere implementato come componente riutilizzabile o classe di utilità CSS. In React, un componente GlassPanel accetta props per intensità di sfocatura, opacità, colore della tinta e visibilità del bordo, renderizzando un div con gli stili calcolati. Tailwind CSS rende il glassmorphism semplice con classi di utilità: bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg. L'implementazione a livello di componente assicura effetti di vetro coerenti attraverso l'applicazione e fornisce un singolo posto per aggiornare l'effetto quando i requisiti di design cambiano. Le preoccupazioni di accessibilità con il glassmorphism si concentrano sulla leggibilità del testo e sulla sensibilità al movimento. Come discusso, lo sfondo che si sposta dietro i pannelli di vetro può rendere il testo difficile da leggere. In aggiunta, l'effetto di sfocatura stesso è un effetto visivo che alcuni utenti con disturbi vestibolari possono trovare disorientante, in particolare quando i pannelli di vetro scorrono su sfondi che cambiano. Rispetta le media query prefers-reduced-transparency e prefers-reduced-motion. Per gli utenti che preferiscono trasparenza ridotta, fall back a uno sfondo opaco solido. Per gli utenti che preferiscono movimento ridotto, evita di animare i pannelli di vetro. Il glassmorphism rispetto ad altre tendenze di design occupa una nicchia specifica. Il neumorphism (soft UI) usa ombre sottili per creare effetti in rilievo e premuti su sfondi dello stesso colore. Soffre di scarso contrasto e problemi di accessibilità. Il flat design usa colori solidi senza effetti di profondità. Il Material Design usa elevazione e ombre su superfici opache. Il glassmorphism si situa tra flat design e material design, aggiungendo profondità attraverso la trasparenza anziché solo l'ombra. Funziona meglio come stile di accento. Un'intera applicazione in glassmorphism diventa visivamente rumorosa. L'uso selettivo (navigazione, modali, card in evidenza) crea interesse visivo senza sopraffare l'utente. Esempi nel mondo reale di implementazioni glassmorphism forniscono punti di riferimento. Apple usa il glassmorphism ampiamente in macOS (barra dei menu, sidebar, centro notifiche) e iOS (Control Center, widget, app switcher). Microsoft usa il materiale Acrylic in Windows 11 (menu Start, taskbar, pannelli impostazioni), che è una variazione del glassmorphism con una sovrapposizione di texture di rumore. Queste implementazioni dimostrano che il glassmorphism funziona meglio quando il sistema operativo o l'applicazione controlla il contenuto di sfondo, assicurando un livello coerente di sfocatura e contrasto. Sul web, dove controlli sia lo sfondo sia i pannelli di vetro, hai lo stesso livello di controllo. La sovrapposizione di texture di rumore aggiunge un grana sottile ai pannelli di vetro che li fa sembrare più come vero vetro smerigliato fisico. Il vero vetro smerigliato ha una texture leggermente ruvida, non una sfocatura perfettamente liscia. Puoi aggiungere questa texture con uno pseudo-elemento usando un PNG di rumore o un filtro SVG a opacità molto bassa (2-5 percento). Il rumore previene che il vetro sembri troppo pulito digitalmente. Il materiale Acrylic di Microsoft usa questa tecnica. Implementazione: aggiungi uno pseudo-elemento ::before con una piccola immagine di rumore affiancata come sfondo, position absolute per riempire il pannello e imposta opacity a 0,03-0,05. Il glassmorphism allo scorrimento richiede un'implementazione attenta. Una barra di navigazione a vetro fissa su contenuto scorrevole crea un effetto di sfocatura costantemente mutevole man mano che contenuto diverso passa dietro di essa. Questo sembra fantastico ma è intensivo per le prestazioni perché il backdrop-filter deve essere ricalcolato ogni frame durante lo scorrimento. Per pagine lunghe con sfocatura basata sullo scorrimento pesante, considera di usare un effetto più semplice su mobile (sfondo semi-trasparente solido) e riservare l'effetto di vetro completo per desktop dove la potenza GPU è in genere sufficiente. Testare il glassmorphism attraverso diversi tipi di contenuto dietro il vetro rivela quanto è robusta la tua implementazione. Testa con contenuto testuale, immagini, video, colori solidi, gradienti e contenuto misto che passa dietro il pannello di vetro. Ciascun tipo di contenuto produce diversi risultati di sfocatura. Il testo denso dietro il vetro crea una sfocatura grigia. Le immagini colorate creano colori vibranti e mutevoli. Il video crea una sfocatura costantemente mutevole. Il tuo pannello di vetro ha bisogno di mantenere la leggibilità del testo e l'attrattiva visiva attraverso tutti questi scenari, oppure devi vincolare quale contenuto può apparire dietro gli elementi di vetro. Il glassmorphism combinato con i pattern di sidebar smerigliata crea un layout applicativo distintivo. Una sidebar a vetro sull'area di contenuto principale fornisce navigazione senza oscurare completamente il contenuto. Passare il mouse o espandere la sidebar rivela più dell'effetto di vetro. Questo pattern funziona bene per dashboard e pannelli di amministrazione dove la sidebar è un elemento secondario. Implementalo con un elemento sidebar fisso o appiccicoso che porta gli stili di vetro, posizionato sopra l'area di contenuto principale con appropriato z-index. Esistono alternative solo CSS a backdrop-filter per i browser più vecchi o le situazioni vincolate dalle prestazioni. Uno pseudo-elemento (::before) posizionato dietro il contenuto può portare una copia sfocata dello sfondo usando background-attachment: fixed con la stessa immagine di sfondo della pagina, più un CSS filter: blur(). Questo approccio non sfoca il contenuto effettivo dietro l'elemento (sfoca un'immagine di sfondo fissa invece), quindi funziona solo per sfondi fissi, non per contenuto dinamico. Nonostante questa limitazione, produce un effetto di vetro convincente con miglior supporto dei browser e prestazioni rispetto a backdrop-filter perché la sfocatura è applicata una volta a un'immagine statica anziché ricalcolata ogni frame. Lo strumento generatore di glassmorphism ti permette di adattare colore di sfondo, opacità, raggio di sfocatura, bordo e ombra in tempo reale mentre previsualizzi il risultato su uno sfondo di esempio. Copia il CSS generato direttamente nel tuo foglio di stile. Inizia con i valori generati come baseline, poi raffinali nel contesto con il tuo sfondo e contenuto effettivi. Il generatore gestisce la sintassi includendo il prefisso -webkit- per la compatibilità con Safari e il fallback @supports per i browser senza supporto backdrop-filter.
Domande frequenti
Cos'è il glassmorphism?
Il glassmorphism è una tendenza del design UI con elementi translucidi simili al vetro smerigliato, sfondo sfocato e bordi sottili.
Il glassmorphism funziona in tutti i browser?
La proprietà backdrop-filter è supportata in tutti i browser moderni inclusi Chrome, Firefox, Safari ed Edge.
