s. smpl.
tools / ● Design / glass-generator

CSS Glassmorphism.

Genera visivamente effetti CSS di vetro smerigliato per la tua UI.

Preview Box

Regola tre cursori — sfocatura, trasparenza e opacità del bordo — e guarda l’effetto aggiornarsi in tempo reale su uno sfondo colorato. Quando ti piace, copia il CSS pronto all’uso e incollalo nel tuo foglio di stile.

Come si usa

Usa i tre cursori per regolare Sfocatura, Trasparenza e Opacità bordo. L’anteprima si aggiorna dal vivo. Copia il CSS generato dalla casella di testo in basso nel pannello dei controlli.

Esempi

Subtle glass blur(6px) · opacity 0.15 · border 0.08
Standard frosted blur(10px) · opacity 0.20 · border 0.10
Heavy frost blur(24px) · opacity 0.35 · border 0.20

FAQ

Why doesn't the effect look like glass on my site?

Glassmorphism requires a colourful or image-based background behind the element. On a plain white background, the blur has nothing to act on and the effect isn't visible.

Is backdrop-filter supported in all browsers?

Yes — in all modern browsers (Chrome, Firefox, Safari, Edge). The generated CSS includes the -webkit- prefix for Safari automatically.

Strumenti correlati

Creatore di gradienti Crea gradienti CSS lineari, radiali o conici con anteprima in tempo reale. Regola colori e direzione, poi copia il CSS. Generatore di ombre Genera box-shadow CSS con anteprima in tempo reale. Aggiungi più livelli per profondità e realismo, poi copia il CSS. Codificatore Base64 Codifica o decodifica testo Base64 all’istante nel browser. Nulla viene inviato a un server.

Privacy e trattamento dei dati

Questo strumento gira interamente nel tuo browser. Nulla di ciò che digiti o incolli viene inviato a un server — tutta l'elaborazione avviene localmente sul tuo dispositivo.