Generatore di Glassmorphism
Regola una card effetto vetro smerigliato — sfocatura, trasparenza, evidenziazione del bordo, raggio degli angoli e ombra — visualizzata in anteprima fluttuante su uno sfondo realmente animato, così la qualità della sfocatura è visibile in movimento.
🔒 Elaborato interamente nel tuo browser: nulla di ciò che inserisci qui verrà mai caricato.
Risultato
backdrop-filter: blur() è la proprietà CSS dietro l'aspetto del vetro smerigliato — un pannello traslucido che sfoca ciò che si muove dietro di esso, invece di limitarsi a mostrare un colore piatto. Il problema è che la qualità della sfocatura è quasi impossibile da valutare su una tinta statica; risulta convincente solo quando c'è realmente qualcosa in movimento sullo sfondo, come accade in una pagina reale con contenuti, video o una hero animata. Questo generatore posiziona la card di anteprima su uno sfondo realmente animato anziché statico, così ciò che vedi mentre trascini i cursori è esattamente quello che i visitatori sperimenteranno.
Lo sfondo è una vera animazione CSS: un ampio linear-gradient dipinto al 400% della dimensione dell'elemento, con @keyframes che spostano il background-position ciclicamente avanti e indietro — nessun loop di animazione JavaScript, nessun canvas, solo la stessa tecnica di background-position continuo usata nelle hero di produzione. Sfocatura, colore e opacità della trasparenza, colore/opacità/spessore dell'evidenziazione del bordo, raggio degli angoli e morbidezza dell'ombra guidano tutti gli stili in tempo reale della card fluttuante, e il riquadro del CSS copiabile rispecchia esattamente gli stessi valori.
Non tutti i browser supportano backdrop-filter, perciò il generatore produce anche un vero blocco @supports not (backdrop-filter: blur(1px)) — non un gesto simbolico, ma una regola di fallback con un proprio colore di sfondo calcolato in base all'opacità effettiva della tua trasparenza. Poiché la traslucenza senza sfocatura ha un aspetto nettamente peggiore (ciò che sta dietro traspare senza essere sfocato), il fallback aumenta automaticamente il canale alfa oltre il valore di opacità della trasparenza che hai scelto, e un commento nel CSS generato spiega esattamente perché e di quanto.
Tutto viene calcolato ed eseguito nel tuo browser: nessun upload, nessun account, nessuna comunicazione con il server. Copia il CSS quando la card ti soddisfa, applicalo a qualsiasi elemento che vuoi posizionare sopra una foto, un video o uno sfumato e conserva il blocco @supports, così i browser meno recenti otterranno comunque una card leggibile e più opaca invece che quasi invisibile.