Generatore di Glassmorphism CSS — Effetto Vetro Smerigliato
Crea l'effetto vetro smerigliato (glassmorphism) con backdrop-filter. Regola sfocatura, trasparenza, saturazione, bordo e raggio, anteprima dal vivo e copia il CSS.
Generatore di Glassmorphism CSS — Progetta l’Effetto Vetro Smerigliato
Crea bellissimi effetti di interfaccia glassmorphism (vetro smerigliato) con un editor visivo dal vivo. Regola la sfocatura, la trasparenza, la saturazione, il bordo e il raggio degli angoli, guarda il risultato aggiornarsi all’istante su uno sfondo colorato, e copia il CSS pronto all’uso. L’aspetto vetro smerigliato reso popolare da iOS, macOS Big Sur e Windows 11 è ora a un clic di distanza.
Cos’è il glassmorphism?
Il glassmorphism è uno stile di design in cui gli elementi dell’interfaccia sembrano vetro smerigliato: uno sfondo semitrasparente con una sfocatura applicata a ciò che sta dietro, un bordo chiaro sottile e un’ombra morbida. La proprietà CSS chiave è backdrop-filter: blur(), che sfoca il contenuto dietro l’elemento anziché l’elemento stesso.
I controlli
- Sfocatura: quanto intensamente viene sfocato lo sfondo dietro la scheda (il cuore dell’effetto)
- Trasparenza: l’opacità della tinta del vetro — più bassa lascia passare più sfondo
- Saturazione: potenzia i colori dietro il vetro per un aspetto più ricco
- Raggio bordo: arrotonda gli angoli della scheda
- Spessore bordo: un bordo chiaro sottile aggiunge il bordo di vetro realistico
- Tinta + modalità scura: sposta il vetro verso un colore, o passa a una variante di vetro scuro
Importante: supporto di backdrop-filter
- L’effetto si basa su
backdrop-filter, supportato in tutti i browser moderni - Il generatore include il prefisso
-webkit-backdrop-filterper Safari - L’elemento deve trovarsi sopra un contenuto o uno sfondo — non c’è nulla da sfocare su una pagina bianca
- Evita la sfocatura eccessiva; 8-16px di solito rende meglio
Consigli di design
- Il glassmorphism brilla su gradienti colorati o foto — prova gli sfondi predefiniti
- Mantieni il testo ad alto contrasto perché rimanga leggibile sulla sfocatura
- Usalo con parsimonia per schede, barre di navigazione o modali — non pagine intere
Privacy
Questo strumento funziona interamente nel tuo browser. Niente viene caricato o memorizzato.