Générateur de Glassmorphism
Créez des effets CSS de verre dépoli avec aperçu en temps réel.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
Outils recommandés
Utilitaires sélectionnés qui pourraient vous être utiles
Créer l'effet verre dépoli (glassmorphism) en CSS
Aperçu
Le glassmorphism, c'est le look verre dépoli — un panneau translucide et flouté qui laisse le fond transparaître en douceur, popularisé par les systèmes d'exploitation modernes. Le recréer en CSS suppose de combiner la transparence du fond, un flou d'arrière-plan, une bordure subtile et une ombre au juste dosage. Ce générateur vous laisse régler chaque partie avec un aperçu en direct et copie le CSS exact, pour obtenir l'effet sans tâtonner.
Comment utiliser (étape par étape)
- 1
Réglez transparence et flou
Ajustez l'opacité du fond et le flou d'arrière-plan pour contrôler l'aspect dépoli du verre.
- 2
Peaufinez bordure et ombre
Ajoutez une fine bordure claire et une ombre douce pour donner au panneau son bord vitreux et sa profondeur.
- 3
Copiez le CSS
Collez la règle générée sur votre élément — placez-le sur un fond coloré ou une image pour voir l'effet.
Comment ça marche
L'effet superpose quelques propriétés CSS : une couleur de fond semi-transparente, backdrop-filter: blur() pour dépolir ce qui se trouve derrière l'élément, une fine bordure claire qui capte le « bord » du verre, et une ombre douce pour la profondeur. Vous réglez flou, transparence et couleur avec des curseurs pendant qu'un aperçu sur un fond montre le résultat, puis vous copiez la règle générée dans votre feuille de style.
Quand l'utiliser
Concevoir une carte, une barre de navigation ou une modale flottant sur un fond ou une image coloré. Donner à une UI une profondeur moderne et en couches. Reproduire le style de panneau dépoli d'iOS ou Windows. Créer une surcouche qui reste lisible tout en montrant le contenu derrière. Prototyper un effet de verre avant de le figer en code. Apprendre comment backdrop-filter et la transparence se combinent.
Questions Fréquentes
backdrop-filter ne floute que le contenu derrière l'élément : il lui faut donc quelque chose de coloré ou une image derrière — sur un fond blanc uni, il n'y a rien à dépolir. Vérifiez aussi que le fond de l'élément est semi-transparent, pas plein.
Notes Importantes
backdrop-filter sollicite fortement le GPU ; de nombreux panneaux de verre sur une page, surtout animés ou au défilement, peuvent ralentir le rendu sur les appareils modestes. Utilisez l'effet avec parcimonie sur les éléments clés.