🪟 Generatore Glassmorphism CSS
Crea effetti vetro smerigliato con blur, trasparenza e bordi in tempo reale
Cos'è il Glassmorphism?
Il glassmorphism è uno stile di design che crea elementi simili a vetro smerigliato usando blur dello sfondo, trasparenza e bordi sottili. Perfetto per UI moderne e eleganti!
⚙️ Personalizzazione Base
🎨 Colore Elemento
💧 Trasparenza
📏 Dimensioni
⬜ Forma
👁️ Anteprima
✨ Effetti Avanzati
🌫️ Blur (Sfocatura)
🔲 Bordo
💫 Ombra
📋 Codice CSS
📚 Guida al Glassmorphism
🎯 Cos'è il Glassmorphism?
Il glassmorphism è una tendenza di design UI che simula l'effetto del vetro smerigliato. Utilizza la proprietà backdrop-filter di CSS per sfocare lo sfondo, combinata con trasparenza e bordi sottili per creare un effetto di profondità elegante e moderno.
✨ Elementi Chiave
- Backdrop Filter: Sfoca lo sfondo dietro l'elemento
- Trasparenza: Background semi-trasparente (rgba)
- Bordo Sottile: Bordo bianco/chiaro semi-trasparente
- Box Shadow: Ombra morbida per aggiungere profondità
🎨 Quando Usarlo
Il glassmorphism funziona meglio quando:
- Hai uno sfondo colorato o con gradiente
- Vuoi creare una gerarchia visiva elegante
- Stai progettando card, modal o overlay
- Vuoi un look moderno e premium
💡 Best Practices
- Usa sfondi colorati o con pattern per far risaltare l'effetto vetro
- Mantieni il blur tra 5-20px per il miglior risultato
- Usa opacità basse (0.1-0.3) per un effetto più sottile
- Combina con bordi chiari per definire meglio i contorni
- Aggiungi sempre un fallback per browser che non supportano backdrop-filter
⚠️ Compatibilità Browser
La proprietà backdrop-filter è supportata su:
- ✅ Chrome/Edge 76+
- ✅ Safari 9+ (con prefisso -webkit-)
- ✅ Firefox 103+
- ⚠️ Non supportato su IE11 e vecchie versioni di Firefox
Il codice generato include automaticamente il prefisso -webkit- per la massima compatibilità.