Generatore di Glassmorphism
Crea schede UI in vetro smerigliato con sfocatura dello sfondo, trasparenza e bordi, quindi copia il CSS.
Scheda di vetro
Vetro smerigliato che fluttua su uno sfondo vivace.
—
Genera sia backdrop-filter che -webkit-backdrop-filter. Nota: backdrop-filter non è supportato nei browser più datati (es. Firefox precedente alla 103); aggiungi uno sfondo di fallback opaco per questi casi.
Informazioni su Generatore di Glassmorphism
Il Generatore di Glassmorphism costruisce l'effetto scheda in vetro smerigliato: un pannello traslucido che sfoca qualsiasi cosa si trovi dietro. Gli slider controllano la sfocatura e la saturazione del backdrop-filter, il colore e la trasparenza della tinta del vetro, il colore e l'opacità del bordo, il raggio degli angoli e un'ombra esterna — ogni modifica viene renderizzata dal vivo su uno sfondo vivace così puoi valutare l'effetto in modo realistico.
Quattro preset di qualità — subtle, frosted, vivid e dark glass — offrono combinazioni collaudate da cui partire. Il preset dark mostra come la stessa ricetta si adatti alle interfacce scure, dove un bordo chiaro tenue fa gran parte del lavoro di separazione tra il vetro e lo sfondo.
Il CSS generato include sia backdrop-filter sia il prefisso -webkit-backdrop-filter richiesto da Safari. Nota la limitazione di compatibilità: i browser più vecchi (per esempio Firefox prima della versione 103) non supportano backdrop-filter, quindi fornisci per loro uno sfondo solido di riserva.
Come usare Generatore di Glassmorphism
- Parti da un preset — subtle, frosted, vivid o dark glass — oppure dai valori predefiniti.
- Regola la sfocatura e la saturazione del backdrop filter.
- Imposta il colore della tinta del vetro e la sua trasparenza.
- Regola il colore del bordo, l'opacità del bordo, il raggio degli angoli e l'ombra di contorno.
- Copia il CSS — include già la proprietà con prefisso -webkit- per Safari.