backdrop-filter en CSS : l'effet verre dépoli qui floute ce qui est derrière

Ce panneau de réglages qui apparaît par-dessus l'écran d'un téléphone, laissant deviner en flou tout ce qu'il y a en dessous : c'est l'effet verre dépoli, devenu un classique d'interface. backdrop-filter est la propriété qui le rend possible en CSS pur, sans image ni superposition manuelle.

Sa proximité de nom avec filter (CSS) entretient une confusion fréquente, alors que les deux propriétés n'agissent pas du tout sur la même chose.

Définition

backdrop-filter applique un ou plusieurs effets visuels, avec exactement les mêmes fonctions que filter comme blur() ou saturate(), mais à ce qui se trouve derrière l'élément plutôt qu'à l'élément lui-même. Pour que l'effet soit visible, l'élément doit laisser passer une partie de ce qui est en dessous : une background-color totalement opaque cacherait entièrement ce qu'il y a à flouter.

.panneau-verre {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

backdrop-filter contre filter

La différence tient à une seule question : qu'est-ce qui est transformé ? Avec filter, c'est le rendu de l'élément et de son contenu. Avec backdrop-filter, c'est tout ce qui se trouve visuellement derrière lui, à travers ses zones transparentes ou semi-transparentes, sans que le contenu propre de l'élément ne soit lui-même flouté ou modifié.

Pourquoi la transparence est indispensable

Sans une part de transparence, il n'y a tout simplement rien à flouter à travers l'élément : le fond opaque masque déjà totalement ce qu'il y a en dessous, quelle que soit la valeur donnée à backdrop-filter. L'effet suppose aussi un contexte d'empilement correctement construit : l'élément doit être positionné au-dessus du contenu qu'il est censé flouter, sinon il n'y a rien à révéler derrière lui.

Cas d'usage typiques

La barre de navigation qui reste lisible pendant qu'on la traverse en défilant, la fenêtre modale posée par-dessus le reste de l'interface, ou le centre de contrôle d'un système d'exploitation mobile : ce sont les trois contextes où backdrop-filter apparaît le plus souvent. Dans les trois cas, le principe reste identique, un panneau doit rester lisible sans complètement masquer ce qu'il recouvre, ce qui donne à l'utilisateur un repère visuel sur le contenu resté en dessous. L'effet fonctionne particulièrement bien sur un fond qui bouge, comme une page qui défile, puisque le flou masque justement le détail changeant tout en laissant deviner ses couleurs dominantes.

Compatibilité et repli

Safari a longtemps exigé le préfixe -webkit-backdrop-filter avant de reconnaître la propriété standard, et il reste courant de déclarer les deux versions l'une après l'autre pour couvrir un maximum d'appareils. Sur un navigateur qui ignore totalement la propriété, aucune erreur ne s'affiche : l'élément garde simplement sa transparence sans le flou, ce qui reste un repli visuellement acceptable tant que le fond choisi fonctionne aussi sans l'effet.

Questions fréquentes

La cause la plus fréquente est un fond totalement opaque : sans transparence sur background-color, il n'y a rien à flouter à travers l'élément. Vérifiez aussi que le navigateur reconnaît la propriété, ou que le préfixe -webkit- a bien été ajouté à côté de la version standard.

Le support s'est largement généralisé sur les navigateurs modernes, mais certaines versions plus anciennes l'ignorent encore silencieusement. Toujours prévoir un fond semi-transparent qui reste visuellement correct même si l'effet de flou ne s'applique jamais, plutôt que de compter sur son affichage garanti.

Oui, rien n'empêche de flouter à la fois le contenu propre d'un élément avec filter et ce qui se trouve derrière lui avec backdrop-filter. Les deux propriétés cohabitent sans conflit puisqu'elles n'agissent jamais sur la même couche visuelle.