Generatore di interfaccia utente moderno
Genera bellissimo codice dell'interfaccia utente (Glassmorphism supportato)
Preset (12 tipi) → Scorri
Editor
Glassmorphism
Modern UI CSS Generator
Codice Generato
📖 Informazioni
Il Glassmorphism è una tendenza di design dell'interfaccia utente che crea una texture di vetro smerigliato rendendo lo sfondo semitrasparente e applicando un effetto di sfocatura (backdrop-filter: blur()). È ampiamente adottato in macOS/iOS di Apple e nel Fluent Design System di Windows.
Con questo strumento, puoi applicare 12 tipi di preset con un clic e regolare individualmente le 4 funzioni di backdrop-filter: sfocatura, luminosità, saturazione e contrasto. Puoi anche perfezionare i bordi, le ombre e gli angoli arrotondati con gli slider e copiare il codice in formato CSS o variabile CSS.
🔰 Come Usare
Seleziona un preset o regola con gli slider
Fai clic sul tuo stile preferito dalla galleria dei preset in alto. Se inizi da zero, regola ciascuna proprietà con gli slider.
Controlla l'anteprima
Controlla l'effetto in tempo reale nell'area di anteprima. Puoi testare 6 pattern di sfondo con il pulsante di cambio sfondo.
Copia il codice
Seleziona il tuo formato preferito tra CSS o variabili CSS, fai clic sul pulsante 📋 per copiare e incollalo direttamente nel tuo progetto.
📚 Guida alle Proprietà
- backdrop-filter: blur()
- Sfoca l'area dietro l'elemento. Maggiore è il valore, più forte sarà l'effetto vetro smerigliato. Questa è la proprietà principale del Glassmorphism.
- backdrop-filter: brightness()
- Regola la luminosità dello sfondo. 100% è il valore predefinito. 200% lo rende due volte più luminoso e 0% lo rende nero pece.
- backdrop-filter: saturate()
- Regola la saturazione dello sfondo. 100% è il valore predefinito. 0% lo rende monocromatico e 200% lo rende un colore vivido e ipersaturo.
- backdrop-filter: contrast()
- Regola il contrasto dello sfondo. 100% è il valore predefinito. Aumentando il valore si enfatizza la differenza tra chiaro e scuro.
- Prefisso Vendor (Vendor Prefix)
- Si consiglia di includere
-webkit-backdrop-filterper il supporto a Safari. È incluso automaticamente nel codice generato da questo strumento.
❓ FAQ
- Q. backdrop-filter è supportato da tutti i browser?
- A. È supportato dalle versioni più recenti dei principali browser come Chrome, Edge, Safari e Firefox. IE11 non è supportato, ma si consiglia un design di ripiego utilizzando solo un colore di sfondo semitrasparente.
- Q. Qual è la differenza tra Neumorfismo e Glassmorphism?
- A. Il Glassmorphism utilizza backdrop-filter per creare un effetto 'vetro smerigliato', rappresentando la sovrapposizione di elementi (asse Z). Il Neumorfismo utilizza le ombre (box-shadow) chiare e scure per rappresentare 'sporgenze e rientranze'.
- Q. Influisce sulle prestazioni?
- A. Poiché backdrop-filter utilizza la composizione GPU, un uso moderato va bene. Tuttavia, applicare valori di sfocatura elevati all'intera pagina potrebbe causare cali di framerate.
- Q. Posso usare il codice generato così com'è?
- A. Sì. Basta incollare il CSS copiato nel tuo foglio di stile per applicarlo. Puoi cambiare il nome della classe in base alle tue esigenze.
💡 Casi d'Uso
Barra di navigazione
Un'interfaccia utente elegante in cui la barra di navigazione semitrasparente sfoca lo sfondo durante lo scorrimento.
Modali e Finestre di dialogo
Sfoca lo sfondo per concentrarsi sul modale, visualizzando la gerarchia dei contenuti.
Card UI e Tabelle Prezzi
Crea un'atmosfera premium e avanzata con un effetto vetro smerigliato sulle tabelle dei prezzi e sulle schede delle funzionalità.
Pannelli Dashboard
Utilizzato nei pannelli dei cruscotti SaaS per mantenere la leggibilità anche su sfondi complessi.
Invia feedback
Facci sapere la tua opinione per aiutarci a migliorare lo strumento.
Il feedback è temporaneamente sospeso
Il server è occupato o la protezione antispam è attiva. Riprova più tardi.