Générateur de glassmorphism (verre dépoli)
Concevez des cartes et panneaux en verre dépoli et voyez le résultat instantanément sur différents fonds. Le CSS généré inclut le préfixe -webkit- dont Safari a encore besoin.
Traité à 100 % dans votre navigateur
Le fond est flouté derrière cette carte. Ajustez les réglages et copiez le CSS.
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Choisissez la couleur du verre (blanc sur fond sombre, noir sur fond clair).
- 2Réglez transparence, flou et saturation jusqu’à obtenir l’effet voulu.
- 3Ajoutez bordure et ombre pour détacher le verre du fond, et testez d’autres fonds.
- 4Copiez le CSS ou partagez un lien vers vos réglages.
Cas d’usage
- Cartes, modales et barres de navigation modernes.
- Panneaux sur des photos ou vidéos sans perte de lisibilité.
- Interfaces inspirées de macOS, iOS ou Windows 11.
- Prototypes rapides à présenter aux clients.
Questions fréquentes
Qu’est-ce que le glassmorphism ?
Un style visuel qui imite le verre dépoli : un panneau semi-transparent qui floute ce qui se trouve derrière grâce à la propriété CSS backdrop-filter, souvent avec une fine bordure et une ombre douce.
Est-ce compatible avec tous les navigateurs ?
backdrop-filter fonctionne dans les versions actuelles de Chrome, Edge, Firefox et Safari. Safari exige encore le préfixe -webkit-backdrop-filter, déjà inclus dans le CSS.
Pourquoi je ne vois pas l’effet sur mon site ?
Le flou n’est visible que s’il y a derrière l’élément un contenu détaillé ou coloré (image, dégradé, formes). Sur un fond uni, le verre ressemble à une simple couleur semi-transparente.
Cela affecte-t-il les performances ?
backdrop-filter sollicite le GPU. Limitez-le à quelques éléments et évitez les flous très forts sur de grandes zones, surtout sur les mobiles d’entrée de gamme.