Générateur de glassmorphism CSS
Créez des cartes en verre dépoli avec aperçu.
Réglez le flou, l'opacité de la teinte, le rayon des coins et la bordure d'une carte glassmorphism, visualisez-la en direct sur un fond coloré, puis copiez le CSS complet.
Couleur de fond
Teinte du verre
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
Comment créer du glassmorphism
- Choisissez une couleur de fond derrière la carte en verre.
- Choisissez la teinte et réglez son opacité.
- Ajustez le flou, l'opacité de la bordure et le rayon avec les curseurs.
- Copiez le CSS généré dans votre projet.
Questions fréquentes
Qu'est-ce que le glassmorphism ?
C'est un style d'interface qui imite le verre dépoli : un panneau translucide sur un fond coloré, adouci par un flou d'arrière-plan.
Pourquoi deux propriétés de flou dans le CSS ?
La propriété préfixée webkit maintient l'effet dans Safari et les autres navigateurs qui en ont besoin.
backdrop-filter fonctionne-t-il partout ?
Il est pris en charge par tous les navigateurs modernes. Les très anciens navigateurs afficheront un panneau translucide sans flou.