Effet verre dépoli sur un site : le givre en CSS

Le verre dépoli d’une porte laisse passer la lumière et brouille les formes. Le givre fait la même chose à la vidéo de fond : il la floute légèrement, juste assez pour qu’un texte posé devant se lise sans qu’il faille assombrir l’image. Des dix matières de la bibliothèque, c’est la plus utile à la lecture, et la plus chère pour le navigateur.

Sans

Givre

D’où vient l’effet

Dans les interfaces, le verre dépoli est devenu une matière à part entière. Microsoft en a fait l’acrylique de son système de design Fluent : une surface translucide, faite d’un flou, d’un léger bruit et d’une teinte, qui donne de la profondeur et aide à hiérarchiser l’écran (Microsoft Learn). Apple décrit de son côté des matériaux plus ou moins épais. Les plus opaques offrent un meilleur contraste au texte ; les plus fins laissent deviner le contenu de dessous et aident à garder ses repères (Apple, Human Interface Guidelines).

Sur le web, l’effet passe par une propriété CSS, backdrop-filter, qui applique un filtre, un flou par exemple, à tout ce qui se trouve derrière un élément. Elle fonctionne dans les navigateurs récents depuis septembre 2024 (MDN).

Quand le poser

Le givre sauve un fond trop détaillé sous du texte. Assombrir davantage l’image l’éteint ; le givre la garde lumineuse et lui retire ses petits détails, ceux qui se battent avec les lettres. Il rend service à :

• un restaurant ou une épicerie filmés en plein service, avec du monde et des étals ;
• un événement filmé dans la foule, sous les projecteurs ;
• un hébergement dont la vue, une rue animée, un port, un feuillage, fourmille de détails ;
• une agence dont la vidéo de fond est dense, pleine de petits éléments en mouvement.

Aucune des vingt-quatre mises en page de l’atelier ne le pose d’office. Il se prend comme un remède, quand la page en a besoin, et la feuille de la bibliothèque le réserve aux fonds vidéo chargés.

Quand s’en passer. Sur un fond uni ou un dégradé, il n’y a rien à flouter : le navigateur paierait le calcul pour un résultat invisible. Même chose pour une vidéo déjà douce, une brume, une eau calme. Et si l’image elle-même porte le message, le geste d’un artisan ou un plat qu’on dresse, la flouter lui retire son argument.

Le bon dosage

Le givre est réglé à 3 pixels de flou, avec une saturation relevée de 8 % pour que l’image ne paraisse pas délavée. Trois pixels effacent les petits détails, les visages lointains, les inscriptions, les feuilles, et gardent les masses et les couleurs. Plus fort, il efface aussi les formes, et le film perd son sujet.

Il se place entre le fond et le contenu : il floute la vidéo, et le texte reste net. La feuille de la bibliothèque garde la trace d’une première version, posée par-dessus tout comme les autres calques : elle floutait la page entière, texte compris, et la rendait illisible.

Comme les autres matières, il laisse le premier écran tranquille : la vidéo d’accueil reste nette, et le flou arrive avec le défilement, derrière les sections qui suivent. Il sert donc les pages dont le fond reste visible sous le contenu. Le givre compte pour l’une des deux matières au plus ; avec le vignettage, il fait une paire sobre, l’un pour les détails, l’autre pour les bords.

Ce qu’il coûte

C’est la seule matière de la bibliothèque qui se paie vraiment. Un flou porte sur ce qui est peint derrière l’élément. Tant que la vidéo joue, cette image change, et le navigateur refait le flou, sur toute la surface, à chaque image du film.

Les éditeurs le disent chacun à leur façon. web.dev prévient que backdrop-filter peut nuire aux performances, et conseille de tester avant de mettre en ligne. Microsoft écrit que le rendu de son acrylique sollicite fortement la carte graphique, augmente la consommation et réduit l’autonomie ; Windows le remplace par une couleur unie quand l’économiseur de batterie est activé.

En pratique :

• réservez-le aux fonds vidéo vraiment chargés ;
• testez la page sur un téléphone d’entrée de gamme, en plus de votre ordinateur ;
• n’empilez pas deux surfaces floutées : Microsoft le déconseille aussi pour son acrylique, qui crée alors des illusions d’optique gênantes.

Le calque n’a aucune animation propre. Son flou suit le défilement, de zéro à trois pixels, pendant le premier écran, puis ne bouge plus ; pendant cette montée, le navigateur recalcule aussi le flou à chaque pas.

L’accessibilité

• Le contraste. Le flou aide la lecture, et la mesure reste nécessaire : au moins 4,5 pour 1 entre un texte courant et son fond (WCAG 2.2, critère 1.4.3), à vérifier sur le passage le plus clair du film. Apple conseille un matériau plus épais, donc plus opaque, quand le texte est fin.
• Le mouvement réduit. Quand le visiteur demande moins d’animations (prefers-reduced-motion), le givre disparaît, comme le grain. La feuille de la bibliothèque en donne la raison : sans film qui bouge, il coûte cher sans rien apporter. La vidéo de fond s’efface alors, et son affiche reste. Si votre système demande ce repli, l’image marquée « Givre », plus haut, est restée nette.
• La transparence réduite. Windows, macOS et iOS proposent aussi un réglage pour réduire la transparence, que le CSS lit par prefers-reduced-transparency. MDN le classe encore comme expérimental, absent de plusieurs grands navigateurs. Dans l’atelier, le repli du givre suit le réglage du mouvement.
• Aucun clignotement. Le flou ne pulse pas : rien ne s’y allume ni ne s’y éteint.

Comment il est fait

Un calque plein écran, transparent, qui porte backdrop-filter: blur() : le navigateur floute tout ce qui est peint derrière lui (MDN). Le calque est placé au niveau zéro, au-dessus du fond animé et sous le contenu, et une requête média le retire quand le mouvement réduit est demandé.

.m.m--givre {
  z-index: 0;
  backdrop-filter: blur(calc(var(--givre, 3) * var(--m-voile, 1) * 1px)) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .m--givre { display: none; }
}

Un piège, signalé par MDN : si un élément parent du calque a une opacité inférieure à 1, le filtre ne voit plus ce qui se trouve derrière ce parent, et le flou semble ne rien faire.

Dans l’atelier

Le givre fait partie des dix matières de la bibliothèque. On le choisit à l’étape « La matière », après le fond, et seulement si le fond est une vidéo chargée.