Generatore di glassmorphism

Il glassmorphism è uno stile UI che fa sembrare un elemento come vetro smerigliato — un pannello semitrasparente che smeriglia tutto ciò che si trova dietro di esso, rifinito con un sottile bordo chiaro e un'ombra morbida per la profondità. Lo vedi in macOS Big Sur, nelle superfici acriliche di Windows 11 e nelle moderne card di login. I tre ingredienti sono un riempimento di sfondo traslucido, un backdrop blur e un bordo sottile da 1px, ad esempio background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).

Dai all'elemento uno sfondo semitrasparente e un backdrop blur, poi aggiungi un bordo sottilissimo. Un buon punto di partenza è: background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). La chiave è che il riempimento dello sfondo sia parzialmente trasparente in modo che il blur dietro di esso si veda. Trascina i cursori qui sopra per regolarlo e copia il CSS esatto.

backdrop-filter applica un effetto grafico — più comunemente blur() — all'area dietro un elemento, non al contenuto dell'elemento stesso. Quindi backdrop-filter: blur(10px) smeriglia tutto ciò che è reso dietro il box, creando l'effetto vetro smerigliato. Puoi anche concatenare i filtri, ad esempio backdrop-filter: blur(10px) saturate(150%) per smerigliare e aumentare il colore dietro il vetro contemporaneamente. Funziona solo se lo sfondo dell'elemento è almeno parzialmente trasparente.

Il vetro smerigliato è il glassmorphism con un blur più pesante e una tinta leggermente più opaca. Prova background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px. Aumenta il blur a 14-20px e l'opacità della tinta a circa il 20-30% in modo che la superficie si legga come "smerigliata" piuttosto che trasparente. Il preset Frosted card in UtiloKit imposta questi valori per te istantaneamente, così puoi partire da lì e regolare.

Sì — backdrop-filter è supportato in tutti i principali browser moderni (Chrome, Edge, Firefox e Safari). Safari lo supporta da anni tramite il prefisso -webkit-backdrop-filter, quindi includi sempre entrambe le righe: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). Il generatore glassmorphism di UtiloKit emette automaticamente la versione con prefisso. I browser molto vecchi che non lo supportano mostrano semplicemente il tuo sfondo semitrasparente normale, degradando in modo elegante.

Le tre cause più comuni: (1) non c'è nulla dietro l'elemento da smerigliare — backdrop-filter agisce solo sul contenuto reso dietro di esso, quindi posizionalo sopra un'immagine o un gradiente; (2) lo sfondo dell'elemento è completamente opaco — usa un riempimento rgba() come rgba(255,255,255,0.18) affinché il blur si veda; (3) hai dimenticato il prefisso -webkit-backdrop-filter per Safari. Nota anche che un antenato con filter, transform o will-change può creare un blocco contenitore che rompe completamente l'effetto.

Combina le utility backdrop-blur con uno sfondo traslucido e un bordo tenue. Per esempio: class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". Usa backdrop-saturate-150 per intensificare il colore dietro. Per valori esatti, passa alla scheda Tailwind nell'output qui sopra — emette classi con valori arbitrari come backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px] che corrispondono esattamente ai tuoi cursori.

Il glassmorphism usa la trasparenza e un backdrop blur in modo che l'elemento sembri vetro smerigliato che fluttua sopra il contenuto. Il neumorphism (soft UI) è l'opposto: elementi opachi dello stesso colore della pagina, a cui viene dato un aspetto 3D estruso con ombre chiare e scure accoppiate — ad esempio box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. Il glassmorphism necessita di uno sfondo colorato per brillare; il neumorphism necessita di uno sfondo uniforme a tinta unita per funzionare.

Per la maggior parte delle card, un backdrop blur di 8-16px ha il giusto aspetto. Usa circa 5-8px per un vetro leggero e appena smerigliato, 10-16px per una tipica card o modal, e 16-25px per una navbar o overlay con vetro pesantemente smerigliato. Abbina più blur a un'opacità della tinta leggermente più alta affinché il testo rimanga leggibile. Il cursore Blur va da 0 a 40px, così puoi trovare il punto ottimale per la tua specifica immagine di sfondo senza dover indovinare.

La leggibilità deriva dal contrasto tra il testo e lo sfondo smerigliato. Aumenta l'opacità della tinta a circa il 25-40% affinché la superficie sia meno trasparente, aggiungi backdrop-saturate per attenuare i colori vivaci dietro, e scegli un colore del testo con forte contrasto — testo bianco su vetro a tinta scura, o testo scuro su tinta chiara. Punta al rapporto di contrasto WCAG 4.5:1 per il testo del corpo, ed evita di posizionare testo piccolo sulla parte più colorata dell'immagine di sfondo.

Può esserlo, ma richiede attenzione. La trasparenza rende il contrasto imprevedibile perché il colore dietro il vetro continua a cambiare, il che può portare il testo al di sotto del minimo WCAG 4.5:1. Usa un'opacità della tinta sufficientemente alta (30%+), testa il testo rispetto alla parte più vivace dello sfondo, e non fare affidamento solo sul blur per separare il contenuto. Rispetta anche gli utenti che impostano prefers-reduced-transparency fornendo un fallback più opaco nel tuo CSS.

Glassmorphism.com (di Michal Malewicz) ti offre un rapido punto di partenza per uno stile, ma non ti permette di caricare la tua immagine di sfondo, controllare la saturazione o esportare classi Tailwind. Glass UI (glass-ui.com) è ugualmente limitato — anteprima con sfondo singolo, nessun output Tailwind, nessun link condivisibile. UtiloKit ti permette di caricare la tua immagine, regolare ogni parametro inclusi saturazione e intensità ombra, ottenere sia l'output CSS che Tailwind, e condividere la configurazione esatta tramite URL. Tutto gira nel browser senza caricare nulla su alcun server.

Posiziona un container sopra un'immagine di sfondo o un gradiente, poi applica il CSS generato alla card. Esempio minimo: dai al genitore uno sfondo, poi applica al figlio background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px. Copia lo snippet HTML pronto nell'output qui sopra — include il markup e un blocco style che puoi incollare direttamente nella tua pagina senza configurazioni aggiuntive.

Sì. Il generatore glassmorphism di UtiloKit è completamente responsive e funziona su Safari su iPhone, Chrome su Android e qualsiasi browser mobile moderno. I cursori sono ottimizzati per il tocco, l'anteprima live si aggiorna in tempo reale, e copiare l'output CSS o Tailwind funziona dagli appunti del telefono esattamente come sul desktop. Poiché tutto gira nel browser senza server, non c'è nulla da installare — apri semplicemente la pagina e inizia a progettare.

Sì — clicca il pulsante Copia link e tutti i valori dei tuoi cursori vengono codificati direttamente nell'URL. Condividi quel link con un designer o uno sviluppatore e aprirà la tua configurazione esatta: stesso blur, stesso colore e opacità della tinta, stessa saturazione, stesse impostazioni bordo e ombra. Nessun account necessario, nessun file da esportare. Questo è un punto in cui glassmorphism.com e Glass UI sono carenti — nessuno dei due supporta link di configurazione condivisibili.