backdrop-filter en CSS : un verre dépoli qui reste rapide

En CSS, backdrop-filter applique un effet graphique, le plus souvent un flou, à tout ce qui se trouve derrière un élément. Écrivez backdrop-filter: blur(12px) sur un élément à l’arrière-plan partiellement transparent et la page en dessous s’adoucit : c’est l’effet verre dépoli des barres de navigation, des panneaux et des cartes. Il est pris en charge par tous les navigateurs actuels. Tout l’art consiste à garder la zone floutée petite, le rayon modeste et le repli lisible.

La recette de base du verre dépoli

Trois ingrédients font le verre : un remplissage translucide pour laisser voir le fond, le flou lui-même, et un léger contour pour donner une forme au panneau. La plupart des gens ajoutent aussi un petit gain de saturation, car le flou fait la moyenne des couleurs et les laisse plus grises qu’on ne l’attend.

.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}

Le verre ne ressemble à du verre que s’il y a quelque chose à flouter derrière. Sur une page grise et unie, le panneau paraît simplement terne. Placez-le sur une photo ou un dégradé riche, comme l’explique plus en détail le glassmorphisme.

Ce que permettent les fonctions de backdrop-filter

La propriété accepte les mêmes fonctions que filter, et vous pouvez les enchaîner dans une seule déclaration. Elles s’appliquent dans l’ordre, de gauche à droite : blur() puis saturate() ne donne pas le même résultat que l’inverse. La liste complète se trouve sur MDN.

Les performances de backdrop-filter

Le flou fait partie des choses les plus coûteuses qu’un navigateur dessine. Pour flouter une zone, il doit lire chaque pixel derrière l’élément, échantillonner ses voisins jusqu’au rayon du flou et composer le résultat, et il refait ce travail dès que quelque chose change derrière le panneau. Un en-tête fixe au-dessus d’une page qui défile redessine son flou à chaque image du défilement.

Le coût dépend de deux valeurs que vous maîtrisez : la surface de l’élément et le rayon. Un en-tête de 64 pixels flouté à 12px ne coûte presque rien sur n’importe quel appareil. Un voile plein écran flouté à 40px sur une vidéo peut faire perdre des images à un téléphone de milieu de gamme. La vue d’ensemble se trouve dans les performances des dégradés CSS.

Pourquoi backdrop-filter ne fonctionne pas

Quand le flou semble sans effet, la cause figure presque toujours dans une courte liste.

1. 1

   Vérifiez que l’arrière-plan est transparent

   Un background: #fff opaque couvre entièrement le fond flouté. Utilisez une valeur alpha comme rgb(255 255 255 / 0.15).

2. 2

   Ajoutez le préfixe Safari

   Safari n’accepte la propriété sans préfixe qu’à partir de la version 18. Les iPhone plus anciens ont encore besoin de -webkit-backdrop-filter.

3. 3

   Cherchez une racine de fond au-dessus

   Un parent avec filter, une opacity inférieure à 1, un masque ou son propre backdrop-filter limite ce que l’enfant peut voir. L’enfant ne floute alors que ce parent, ce qui ressemble souvent à une absence de flou.

4. 4

   Surveillez les enfants fixes

   Comme filter, backdrop-filter fait de l’élément le bloc conteneur de ses enfants positionnés en fixed et en absolute. Un menu fixe dans un en-tête en verre se positionnera par rapport à l’en-tête, pas à la fenêtre.

5. 5

   Assurez-vous qu’il y a quelque chose derrière

   Un flou sur une couleur unie est invisible. Faites défiler le panneau au-dessus d’une image pour vérifier qu’il fonctionne.

Un repli qui garde le texte lisible

Les panneaux translucides sont conçus autour du flou. Sans lui, un remplissage blanc à 14 % sur une photo chargée laisse le texte posé directement sur la photo, et le contraste s’effondre. Écrivez d’abord la version lisible, puis améliorez-la là où le navigateur sait flouter.

/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Vérifiez le contraste sur le pire endroit derrière le panneau, pas sur la moyenne. Un titre blanc sur un verre qui passe devant un ciel lumineux peut tomber bien en dessous des rapports indiqués dans contraste des couleurs et accessibilité. Assombrir avec brightness(0.7) règle en général le problème plus sûrement qu’un flou plus fort.

Quand vous n’avez pas du tout besoin de flou

Beaucoup de verre dépoli n’existe que pour rendre des mots lisibles sur un fond chargé. Si le fond est à vous de concevoir, un fond plus calme règle le problème sans aucun coût de rendu. Un dégradé doux et peu contrasté derrière un en-tête n’a besoin d’aucun panneau ; voyez les fonds d’en-tête de site et les fonds flous, où le flou est intégré une fois pour toutes à l’image au lieu d’être calculé à chaque image.

Cette seconde approche est celle de Gradiently pour la lisibilité : un Mark sait où se trouvent les mots et place derrière eux sa zone la plus calme et la plus contrastée, si bien que vous n’avez jamais besoin d’un encadré ni d’un flou pour sauver un titre.