Glassmorphism CSS : Créer une UI à effet verre

Implémentez le glassmorphism avec backdrop-filter, la transparence rgba et des astuces de bordure. Support navigateurs et accessibilité inclus.

6 min de lecture CSS · Design · UI 6 sections + FAQ

Le glassmorphism est devenu l'une des tendances UI définissant le début des années 2020. L'effet verre dépoli crée un sentiment de profondeur et de translucidité.

L'implémentation CSS nécessite trois ingrédients : backdrop-filter pour le flou, rgba pour la transparence et une bordure semi-transparente.

Qu'est-ce que le glassmorphism

Le glassmorphism est un style de design caractérisé par des surfaces translucides avec un effet de verre dépoli. Propriétés visuelles clés : transparence d'arrière-plan (30-50% d'opacité), flou d'arrière-plan (8-32px), bordure subtile (1-2px, blanc semi-transparent).

Outil gratuit Générateur de glassmorphisme Créez des effets UI verre dépoli avec aperçu CSS en direct

Syntaxe backdrop-filter: blur()

backdrop-filter applique des effets graphiques au contenu derrière un élément. La fonction blur() floute l'arrière-plan : backdrop-filter: blur(12px).

rgba et transparence

La surface en verre utilise rgba() avec un alpha bas : background: rgba(255, 255, 255, 0.15). La valeur alpha (0.15-0.25) contrôle la transparence de la surface.

Outil gratuit Générateur de filtres CSS Appliquez flou, luminosité et contraste avec les filtres CSS

Bordure avec rgba

Une caractéristique définissant le glassmorphism est la bordure semi-transparente : border: 1px solid rgba(255, 255, 255, 0.3). La bordure simule la lumière se réfléchissant sur le bord du verre.

Support navigateurs et fallbacks

backdrop-filter est supporté dans tous les navigateurs modernes depuis 2022. Utilisez @supports (backdrop-filter: blur(1px)) pour appliquer le glassmorphism uniquement là où il est supporté.

Considérations de performance

backdrop-filter est coûteux en performance. Limitez le nombre d'éléments avec backdrop-filter et testez sur des appareils peu puissants.

Outil gratuit Générateur de neumorphisme Créez des effets UI doux extrudés avec des doubles ombres box

Questions fréquentes

Quel est le CSS minimum pour un effet glassmorphism ? +
Trois propriétés : background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3).
Pourquoi mon backdrop-filter ne fonctionne-t-il pas ? +
Raisons les plus courantes : l'élément est entièrement opaque, il n'y a pas de contenu derrière l'élément, ou le navigateur ne supporte pas backdrop-filter.
Le glassmorphism a-t-il des problèmes d'accessibilité ? +
Oui. Les arrière-plans flous réduisent la lisibilité du texte. Assurez toujours des ratios de contraste suffisants.
Puis-je utiliser le glassmorphism sur des fonds sombres ? +
Oui. Pour le verre sombre : background: rgba(0,0,0,0.2); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1).
Comment ajouter un fallback pour les navigateurs sans support backdrop-filter ? +
Utilisez @supports (backdrop-filter: blur(1px)) pour l'effet verre et fournissez un fond solide en fallback.
Quelle valeur de flou utiliser pour le glassmorphism ? +
Valeurs typiques : 8px pour un verre subtil, 12-16px pour un verre standard, 24-32px pour un verre dépoli épais.
Le glassmorphism est-il encore une tendance de design actuelle ? +
Le glassmorphism a atteint son apogée en 2021-2022 et s'est établi dans l'usage courant pour des contextes spécifiques.