Glassmorphism CSS : effet verre dépoli avec backdrop-filter

L'effet glassmorphism CSS — ce rendu verre dépoli qui floute tout ce qui se trouve derrière lui — est devenu un classique du design d'interface moderne. L'astuce ne tient pas à une propriété magique unique ; elle repose sur l'interaction d'une couleur de fond translucide, d'un flou appliqué via backdrop-filter, d'une fine bordure et d'une ombre douce qui travaillent ensemble. Dans ce guide, nous construirons l'effet de zéro en gardant à l'esprit la performance et l'accessibilité.

Qu'est-ce que le glassmorphism et de quelles couches se compose-t-il

Quand tu regardes un véritable panneau de verre, tu perçois quatre choses à la fois : l'image floue derrière lui, la légère teinte du verre, le reflet le long de son bord et la sensation que la surface flotte. En CSS, nous imitons cela avec les couches suivantes :

• Flou : backdrop-filter: blur(...) floute les pixels derrière l'élément.
• Translucidité : une couleur de remplissage à faible opacité via rgba() ou hsl(... / 0.x).
• Bord : une border blanche semi-transparente de 1px imite la lumière qui accroche le rebord.
• Profondeur : une box-shadow large et douce donne la sensation de flottement.

Un point crucial : l'effet n'est visible que s'il y a quelque chose à flouter derrière le panneau. Sur un fond plat d'une seule couleur, le glassmorphism disparaît ; il faut un dégradé coloré, une photo ou des formes en blob.

Une carte glassmorphism CSS de base

Dans sa forme la plus simple, une carte en verre ressemble à ceci. On colore d'abord le fond, puis on construit la carte :

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  display: grid;
  place-items: center;
}

.glass {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  color: #fff;
}

La ligne -webkit-backdrop-filter n'est pas là pour rien : Safari n'a longtemps pris en charge que la version préfixée, et sur Safari mobile il reste prudent de jouer la sécurité. Écris toujours la ligne préfixée avant la ligne standard.

Affiner backdrop-filter

backdrop-filter n'accepte pas seulement blur() ; tu peux enchaîner plusieurs filtres séparés par des espaces. Augmenter la saturation est un excellent moyen de rendre le verre plus vif :

.glass {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

Quelques conseils pratiques :

• Intensité du flou : 8 à 16px est idéal pour la plupart des cartes. Au-delà de 30px, cela ralentit et perd la sensation de « verre ».
• Opacité du remplissage : 0,10–0,20 sur un thème clair, 0,05–0,10 sur un thème sombre reste généralement équilibré.
• Saturation : saturate(150%–180%) fait ressortir les couleurs derrière, se rapprochant de la façon dont le vrai verre réfracte la lumière.

Rendre le reflet du bord réaliste

Une bordure plate d'une seule couleur paraît un peu artificielle. Dans le vrai verre, la lumière vient d'en haut, donc le bord supérieur est plus clair que le bord inférieur. Tu peux imiter cela avec une bordure en dégradé plutôt qu'unie :

.glass {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1)) border-box;
}

Ici, nous utilisons un background à deux couches : le premier dégradé peint le remplissage via padding-box, le second peint la bordure via border-box. Le bord passe alors du clair au sombre d'un coin à l'autre.

Accessibilité et lisibilité

Le plus grand piège du glassmorphism est le contraste. Le texte sur une surface translucide peut devenir illisible selon la couleur derrière. Quelques garde-fous :

• Vise un rapport de contraste d'au moins 4,5:1 entre le texte et son fond (WCAG AA, texte normal).
• Si tu es au-dessus d'un fond très variable, ajoute une légère text-shadow au texte ou augmente un peu l'opacité du panneau.
• Double sécurité : si backdrop-filter n'est pas pris en charge, donne un fond de repli un peu plus opaque pour que le panneau ne reste pas totalement transparent et n'avale pas le texte.

.glass {
  background: rgba(30, 30, 50, 0.6); /* repli : plus opaque */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.12); /* verre : plus transparent */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
  }
}

Grâce à la requête @supports, le navigateur utilise le rendu verre transparent quand il prend en charge backdrop-filter et le repli opaque lisible dans le cas contraire. C'est un exemple manuel d'amélioration progressive.

Performance : où être prudent

backdrop-filter n'est pas un effet bon marché ; le navigateur doit reflouter la région derrière lui à chaque image. Fais attention à :

• Limiter le nombre : utilise une poignée de panneaux en verre plutôt que des dizaines sur le même écran. Appliquer un flou à chaque ligne d'une longue liste ralentit nettement sur mobile.
• Éviter de l'animer : les animations qui changent la valeur de backdrop-filter à chaque image sont coûteuses ; déplace plutôt le panneau avec transform ou opacity.
• Réduire le mouvement : pense à prefers-reduced-motion et aux appareils peu puissants ; si nécessaire, propose un simple panneau opaque en dehors de @supports.

Questions fréquentes

backdrop-filter fonctionne-t-il dans tous les navigateurs ?

Il est pris en charge dans les versions actuelles de Chrome, Edge, Firefox et Safari ; Safari a longtemps exigé le préfixe -webkit-, donc ajouter la ligne préfixée reste une bonne habitude. Pour les navigateurs plus anciens, utilise toujours le repli @supports ci-dessus.

Quelle est la différence entre backdrop-filter et filter ?

filter floute l'élément lui-même (son contenu compris) ; backdrop-filter floute les pixels derrière l'élément et laisse le contenu net. Pour l'effet de verre, il te faut le second.

L'effet n'apparaît pas — pourquoi ?

Les deux causes les plus courantes : il n'y a pas de fond riche en contenu derrière le panneau à flouter (il est invisible sur une couleur plate), ou le remplissage du panneau est totalement opaque et couvre la couche floutée. Utilise un dégradé coloré et baisse l'opacité du remplissage.

Tu veux une touche de verre moderne sur ton interface ? Je peux concevoir et coder des composants glassmorphism performants, accessibles et adaptés à ta marque — contacte-moi et donnons vie à ton idée ensemble.