Generatore di glassmorphism (vetro smerigliato)
Progetta card e pannelli in vetro smerigliato vedendo subito il risultato su sfondi diversi. Il CSS generato include il prefisso -webkit- che Safari richiede ancora.
Elaborato al 100% nel tuo browser
Lo sfondo viene sfocato dietro questa card. Regola i controlli e copia il CSS.
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Scegli il colore del vetro (bianco per sfondi scuri, nero per sfondi chiari).
- 2Regola trasparenza, sfocatura e saturazione fino a ottenere l’effetto desiderato.
- 3Aggiungi bordo e ombra per staccare il vetro dallo sfondo e prova altri sfondi.
- 4Copia il CSS o condividi un link con le impostazioni.
Casi d’uso
- Card, modali e barre di navigazione moderne.
- Pannelli su foto o video senza perdere leggibilità.
- Interfacce ispirate a macOS, iOS o Windows 11.
- Prototipi rapidi da mostrare ai clienti.
Domande frequenti
Cos’è il glassmorphism?
Uno stile visivo che imita il vetro smerigliato: un pannello semitrasparente che sfoca ciò che c’è dietro tramite la proprietà CSS backdrop-filter, di solito con un bordo sottile e un’ombra morbida.
Funziona in tutti i browser?
backdrop-filter funziona nelle versioni attuali di Chrome, Edge, Firefox e Safari. Safari richiede ancora il prefisso -webkit-backdrop-filter, già incluso nel CSS.
Perché non vedo l’effetto sul mio sito?
La sfocatura si nota solo se dietro l’elemento c’è un contenuto ricco di dettagli o colori (un’immagine, un gradiente o delle forme). Su uno sfondo uniforme il vetro sembra solo un colore semitrasparente.
Influisce sulle prestazioni?
backdrop-filter usa la GPU. Applicalo a pochi elementi ed evita sfocature molto forti su aree enormi, soprattutto sugli smartphone economici.