Générateur de glassmorphism (verre dépoli)
Réglez le flou, la transparence et la bordure jusqu’à ce que la carte ressemble à du verre posé sur le fond. Changez le fond pour tester et copiez le CSS.
Mode d’emploiEffet de verre dépoli
Disponible en: 
Générateur de glassmorphism (verre dépoli): à quoi ça sert
Réglez le flou, la transparence, la saturation, la couleur du verre, la bordure et les coins. L’aperçu montre la carte sur un dégradé avec des formes, un paysage, un fond sombre ou votre propre photo.
Le CSS est fourni avec backdrop-filter et le préfixe -webkit- pour Safari, plus une couleur de secours plus opaque pour les navigateurs qui ne gèrent pas le flou.
Mode d’emploi
- Réglez le flou, la transparence et la bordure.
- Changez le fond de l’aperçu ou utilisez votre photo.
- Copiez le CSS et appliquez la classe verre.
Quand l’utiliser
- En-têtes et menus à fond de verre.
- Cartes mises en avant sur des photos.
- Interfaces au look moderne.
Questions fréquentes
Pourquoi le verre n’apparaît-il pas ?
L’effet n’est visible que s’il y a quelque chose de coloré ou de détaillé derrière la carte : photo, dégradé ou formes. Sur un fond blanc uni, le verre dépoli ressemble à une simple carte blanche.
Cela pèse-t-il sur les performances ?
Un peu : le navigateur doit flouter ce qui se trouve derrière. Utilisez-le sur peu d’éléments (en-tête, cartes mises en avant) et évitez-le dans les longues listes ou sur les téléphones modestes.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.