background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Il generatore di vetromorfismo CSS è un editor visivo per lo stile dell'interfaccia utente in vetro smerigliato, dove una superficie traslucida sfoca tutto ciò che si trova dietro di esso. Puoi regolare la sfocatura dello sfondo, il riempimento di trasparenza, la saturazione, il colore della tinta e il raggio dell'angolo con i cursori, guardare un aggiornamento in anteprima su uno sfondo colorato e copiare il CSS esatto che produce.
Il vetromorfismo si basa sulla proprietà del filtro di sfondo, che applica una sfocatura al contenuto dietro un elemento piuttosto che all'elemento stesso. Combinato con uno sfondo semitrasparente, un bordo sottile e un'ombra morbida, produce l'aspetto del vetro stratificato reso popolare dai moderni sistemi operativi. Ottenere il bilanciamento giusto a mano è complicato, quindi questo strumento gestisce ogni valore e produce un blocco pulito e copiabile.
Tutto funziona nel tuo browser. Scegli un preset come glassato, scuro o vibrante, perfeziona i cursori e copia il CSS, incluso il filtro per fondale prefissato -WebKit, per un supporto più ampio. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.
Inizia da glassato, chiaro, scuro, vibrante o sottile per ottenere un aspetto di vetro equilibrato, quindi perfezionalo in modo che si adatti al tuo design.
Trascina i cursori di sfocatura dello sfondo, trasparenza e saturazione, scegli un colore di tinta e imposta il raggio d'angolo. L'anteprima si aggiorna in diretta su uno sfondo colorato in modo che la sfocatura sia visibile.
Attiva o disattiva il bordo dell'attaccatura dei capelli. Un sottile bordo traslucido bianco 1px vende il bordo di vetro, in particolare su sfondi più scuri.
Copia il blocco generato - sfondo, filtro di sfondo (con -webkit- prefisso), raggio-bordo, bordo e ombra - e incollalo sulla tua carta o pannello.
Un cursore di sfocatura dedicato guida il filtro dello sfondo, che gela tutto ciò che si trova dietro l'elemento: il nucleo dell'effetto vetro
Trasparenza, saturazione, colore della tinta, raggio angolare e bordo dell'attaccatura opzionale ti consentono di comporre l'esatto aspetto di vetro
L'anteprima si trova su un gradiente colorato in modo da poter effettivamente vedere la sfocatura dello sfondo che funziona, aggiornandosi istantaneamente mentre si modifica
L'output include sia il filtro per fondali che il prefisso del filtro -webkit-backdrop, quindi l'effetto funziona su Safari e altri browser Webkit
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!