Generatore di glassmorphism CSS

Cos'è Generatore di glassmorphism CSS?

Il generatore di glassmorphism CSS è un editor visivo gratuito per lo stile di interfaccia in vetro smerigliato (glassmorphism), pensato per sviluppatori front-end e designer di prodotto. Regola il livello di sfocatura, la trasparenza della superficie, la saturazione del colore, lo spessore del bordo, il raggio degli angoli e l'intensità dell'ombra con campi numerici e cursori, poi scegli un colore di tinta con il campione. Un pannello di anteprima mostra il pannello di vetro su uno sfondo sfumato vivace in tempo reale, e il CSS completo — con backdrop-filter, uno sfondo semitrasparente, un bordo discreto e una box-shadow — viene generato per essere copiato. Usalo per creare schede, barre di navigazione, modali e overlay in vetro senza regolare a mano l'alfa rgba né ricordare il prefisso -webkit-backdrop-filter.

Come usare Generatore di glassmorphism CSS

1. Imposta la Sfocatura (in px) per controllare quanto l'area dietro il pannello viene smerigliata.
2. Abbassa la Trasparenza per rendere il vetro più traslucido, o alzala per una superficie più solida.
3. Porta la Saturazione oltre il 100% per far risaltare i colori dello sfondo attraverso il vetro.
4. Scegli un colore di tinta con il campione e regola la larghezza del Bordo, il Raggio e l'Ombra per rifinire l'aspetto.
5. Guarda l'anteprima aggiornarsi sullo sfondo in tempo reale mentre modifichi ogni valore.
6. Copia il CSS generato nel tuo foglio di stile — include già il fallback -webkit-backdrop-filter.

Esempi

sfocatura 12, trasparenza 25%, saturazione 120%, raggio 16, bordo 1, ombra 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

sfocatura 8, trasparenza 60%, saturazione 100%, raggio 0, bordo 1, ombra 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

tinta #0f172a, sfocatura 20, trasparenza 30%, saturazione 140%, raggio 24, ombra 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Domande frequenti

Cosa fa backdrop-filter?

backdrop-filter applica effetti grafici — qui sfocatura e saturazione — a tutto ciò che si trova dietro l'elemento, ed è questo a creare l'aspetto del vetro smerigliato. Il generatore produce sia backdrop-filter sia il prefisso -webkit-backdrop-filter perché funzioni sui vari browser, oltre a uno sfondo semitrasparente, un bordo e un'ombra.

Perché c'è un controllo della trasparenza?

L'effetto vetro ha bisogno di uno sfondo parzialmente traslucido perché lo sfondo sfocato traspaia. Il cursore Trasparenza imposta l'alfa del colore di sfondo del pannello (rgba): i valori più bassi sono più trasparenti, quelli più alti più opachi e solidi.

Posso usare un vetro colorato o scuro?

Sì. Scegli un qualsiasi colore di tinta con il campione — lo strumento lo fonde nello sfondo rgba, così puoi creare vetro caldo, freddo o scuro. Combina una tinta scura con una trasparenza più alta per overlay sobri, oppure mantieni il bianco per un classico pannello smerigliato.

Funzionerà in ogni browser?

La maggior parte dei browser moderni supporta backdrop-filter. Il CSS generato include il prefisso -webkit-backdrop-filter per Safari e i Chromium più vecchi, ma i browser molto datati lo ignorano e mostrano semplicemente lo sfondo semitrasparente senza la sfocatura.

I miei dati vengono caricati da qualche parte?

No. Il generatore gira interamente nel tuo browser con JavaScript — i tuoi colori e valori non vengono mai inviati a un server, quindi funziona in modo privato e perfino offline una volta caricata la pagina.