Générateur de Glassmorphisme
Obtenez le look en verre dépoli pour les cartes et les panneaux, et voyez-le sur votre propre fond.
- Vos données ne quittent jamais votre appareil
- 100 % gratuit
- Sans inscription
- Fonctionne hors ligne après la première charge
Comment faire un effet de glassmorphisme
- Ajustez le flou, la transparence, la saturation et la teinte.
- Prévisualisez-le sur le fond coloré ou votre propre image.
- Copiez le CSS, Tailwind ou SCSS.
À propos : Générateur de glassmorphism
Créez des effets CSS en verre dépoli.
Tout fonctionne dans votre navigateur, il est donc instantané et privé. Vos couleurs et paramètres récents sont mémorisés sur cet appareil, et la barre d'adresse conserve votre couleur afin que vous puissiez la partager ou la mettre en signet.
Idéal pour
- Cartes et superpositions de héros
- Barres de navigation et modaux
- Tableaux de bord et widgets
Conseil : Conservez suffisamment de contraste : ajoutez une teinte plus foncée ou un texte sombre lorsque l'arrière-plan est clair.
Questions fréquentes
Comment fonctionne l'effet de verre?
Un arrière-plan semi-transparent plus background-filter: blur() brouille tout ce qui se trouve derrière l'élément. Une bordure claire et une ombre douce font lire le bord comme du verre.
Fonctionne-t-il dans tous les navigateurs ?
background-filter fonctionne dans tous les navigateurs actuels. Le code inclut le préfixe -webkit- pour Safari. Lorsqu'il n'est pas supporté, la carte affiche simplement sa couleur translucide.
Pourquoi ne puis-je pas voir l’effet ?
Le verre a besoin de quelque chose derrière lui — Utilisez le fond coloré ou votre propre image pour le prévisualiser.
Quel fond fonctionne le mieux?
Un verre coloré ou détaillé, comme une photo ou un dégradé, rend le flou visible. Sur une couleur unie, le verre ressemble à une boîte plate et transparente.
Le verre est-il accessible ?
Seulement si le texte reste lisible. Utilisez suffisamment de teinte et vérifiez la couleur du texte par rapport à la partie la plus achalandée de l'arrière-plan avec le vérificateur de contraste.