Le Glassmorphisme est une tendance de conception d'interface utilisateur qui crée une texture de verre dépoli en rendant l'arrière-plan semi-transparent et en appliquant un effet de flou (backdrop-filter: blur()). Il est largement adopté dans le macOS/iOS d'Apple et dans le Windows Fluent Design System.

Avec cet outil, vous pouvez appliquer 12 types de préréglages en un clic et ajuster individuellement les 4 fonctions backdrop-filter : flou, luminosité, saturation et contraste. Vous pouvez également affiner les bordures, les ombres et les coins arrondis avec des curseurs, et copier le code au format CSS ou variable CSS.

backdrop-filter: blur()

Floute la zone derrière l'élément. Plus la valeur est élevée, plus l'effet de verre dépoli est fort. C'est la propriété fondamentale du Glassmorphisme.

backdrop-filter: brightness()

Ajuste la luminosité de l'arrière-plan. 100% est la valeur par défaut. 200% le rend deux fois plus lumineux et 0% le rend complètement noir.

backdrop-filter: saturate()

Ajuste la saturation de l'arrière-plan. 100% est la valeur par défaut. 0% le rend monochrome et 200% le transforme en une couleur vive sursaturée.

backdrop-filter: contrast()

Ajuste le contraste de l'arrière-plan. 100% est la valeur par défaut. Augmenter la valeur accentue la différence entre la lumière et l'obscurité.

Préfixe fournisseur (Vendor Prefix)

Il est recommandé d'inclure -webkit-backdrop-filter pour la compatibilité avec Safari. Il est inclus automatiquement dans le code généré par cet outil.

Q. Est-ce que backdrop-filter est supporté par tous les navigateurs ?

A. Il est supporté par les dernières versions des principaux navigateurs comme Chrome, Edge, Safari et Firefox. IE11 n'est pas supporté, mais un design de secours utilisant uniquement une couleur d'arrière-plan semi-transparente est recommandé.

Q. Quelle est la différence entre le Neumorphisme et le Glassmorphisme ?

A. Le Glassmorphisme utilise backdrop-filter pour créer un effet de 'verre dépoli', représentant la superposition d'éléments (axe Z). Le Neumorphisme utilise le contraste clair et obscur de box-shadow pour représenter les 'reliefs'.

Q. Est-ce que cela affecte les performances ?

A. Étant donné que backdrop-filter utilise la composition GPU, une utilisation modérée ne pose pas de problème. Cependant, l'application de valeurs de flou (blur) élevées à l'ensemble de la page peut réduire la fréquence d'images.

Q. Puis-je utiliser le code généré tel quel ?

A. Oui. Collez simplement le CSS copié dans votre feuille de style pour l'appliquer. Vous pouvez modifier le nom de la classe selon vos besoins.