Générateur CSS de glassmorphism
Concevez un effet de verre (glassmorphism) avec aperçu en direct — ajustez le flou, la transparence, la teinte et la bordure, puis copiez le CSS.
673 vues
Qu'est-ce que le glassmorphism ?
Le glassmorphism est l'apparence du verre dépoli : un panneau semi-transparent qui floute tout ce qui se trouve derrière lui grâce à backdrop-filter: blur(), combiné à une bordure subtile et une ombre. Il fonctionne mieux sur des arrière-plans colorés ou des images — sur un fond uni, le flou est invisible.
Déplacez les curseurs et observez l'aperçu en direct ; le CSS ci-dessous se met à jour instantanément et est prêt à copier. N'oubliez pas le préfixe -webkit-backdrop-filter pour Safari, déjà inclus dans le code généré.
Questions fréquentes
Pourquoi mon effet de verre paraît-il plat ?
backdrop-filter n'apparaît que sur un arrière-plan varié — placez l'élément au-dessus d'un dégradé ou d'une image. Vérifiez aussi la compatibilité navigateur : Safari nécessite le préfixe -webkit- (inclus dans le code généré).
Le backdrop-filter nuit-il aux performances ?
Le flou est accéléré par le GPU mais n'est pas gratuit. Utilisez-le sur quelques surfaces clés (cartes, en-têtes) plutôt que sur des dizaines d'éléments, et gardez des rayons de flou modérés sur mobile.
Quelles valeurs donnent un look verre classique ?
Un bon point de départ : fond blanc à 15-25 % d'opacité, flou de 8-12px, bordure de 1px à 30 % de blanc, et rayon de 16px — les valeurs par défaut de ce générateur.
Outils similaires
Signaler un problème
Générateur CSS de glassmorphism