# backdrop-filter en CSS : un verre dépoli qui reste rapide [Canonical HTML page](https://gradiently.design/fr/guide/css-blur-background) Le verre dépoli tient en trois lignes de CSS et peut pourtant faire saccader un bon téléphone. Voici le code, ce qu’il coûte à dessiner, et les replis qui gardent le texte lisible quand le flou n’arrive jamais. ## The short version - La propriété CSS backdrop-filter applique des effets comme le flou à la zone située derrière un élément, pas à l’élément lui-même. - Un élément a besoin d’un arrière-plan partiellement transparent pour que backdrop-filter se voie ; sur un fond opaque, l’effet est masqué. - Le coût du flou augmente avec son rayon et la taille de la zone floutée, et il est payé à nouveau chaque fois que le contenu derrière bouge. - Safari a exigé le préfixe -webkit-backdrop-filter jusqu’à la version 18 : livrer les deux lignes reste le choix prudent. - Un bon repli consiste en un arrière-plan plus opaque dans une requête @supports, pour que le texte reste lisible quand le flou manque. 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. ```css .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; } ``` Un panneau de verre clair pour une page sombre ou colorée. Gardez la ligne préfixée en premier pour que la propriété standard l’emporte là où les deux sont comprises. 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](https://gradiently.design/fr/guide/glassmorphism). Braise et violet sur nuit: `radial-gradient(circle at 20% 25%, #f97316 0%, transparent 40%), radial-gradient(circle at 80% 70%, #7c3aed 0%, transparent 45%), linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%)` Un fond aux taches de couleur bien distinctes. Le flou les transforme en lumière douce derrière le panneau, ce qui est tout l’intérêt de l’effet. ## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter). | Fonction | Exemple | Utile pour | | --- | --- | --- | | `blur()` | `blur(12px)` | Verre dépoli, mise au point derrière une boîte de dialogue | | `saturate()` | `saturate(160%)` | Rendre la couleur que le flou a grisée | | `brightness()` | `brightness(0.7)` | Assombrir une zone chargée derrière un texte clair | | `contrast()` | `contrast(0.8)` | Apaiser une photo bruyante sous un panneau | | `grayscale()` | `grayscale(1)` | Éteindre la page derrière une fenêtre modale | | `none` | `none` | Désactiver l’effet dans un repli ou une media query | Les fonctions que vous utiliserez vraiment. `brightness()` sous 1 est souvent un meilleur outil de lisibilité qu’un flou plus fort. ## 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](https://gradiently.design/fr/guide/css-gradient-performance). ### Lent - Flouter toute la fenêtre derrière une modale - Des rayons de 30px et plus - Animer le rayon du flou à l’ouverture et à la fermeture - Des panneaux de verre imbriqués dans d’autres - Du flou sur une vidéo en lecture automatique ### Rapide - Flouter seulement la barre, la carte ou le panneau qui en a besoin - Des rayons entre 8px et 20px - Faire apparaître l’opacité du panneau, flou fixe - Une seule couche de verre, des aplats opaques à l’intérieur - Du flou sur des images fixes et des dégradés > **Mesurez sur un vrai téléphone** Dans les outils de développement de Chrome, ouvrez le panneau Rendering, activez Paint flashing et faites défiler. Si le verre clignote à chaque image et que le panneau Performance montre des images perdues, réduisez la surface ou le rayon avant toute autre chose. ## Pourquoi backdrop-filter ne fonctionne pas Quand le flou semble sans effet, la cause figure presque toujours dans une courte liste. 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. **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. **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. **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. **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. ```css /* 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; } } ``` L’amélioration progressive appliquée au verre. La prise en charge de `prefers-reduced-transparency` reste limitée : voyez ce bloc comme une courtoisie plutôt qu’une garantie. 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é](https://gradiently.design/fr/guide/color-contrast-accessibility). 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](https://gradiently.design/fr/guide/website-hero-background) et [les fonds flous](https://gradiently.design/fr/guide/blurred-background), où le flou est intégré une fois pour toutes à l’image au lieu d’être calculé à chaque image. Un large en-tête de site web dont le titre traverse la partie la plus lumineuse d’un dégradé coloré Des mots posés directement sur un fond vivant : c’est là qu’on se tourne vers un panneau de verre. Le même en-tête de site où le dégradé devient plus sombre et plus calme derrière le titre Le même fond qui s’apaise de lui-même derrière les mots, sans panneau, ombre ni flou. 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. ## FAQ ### Quelle différence entre filter et backdrop-filter ? `filter` modifie l’élément et son contenu. `backdrop-filter` modifie seulement ce qui est visible derrière l’élément, à travers son arrière-plan transparent. ### Pourquoi mon flou backdrop-filter ne s’affiche-t-il pas ? En général, l’arrière-plan de l’élément est totalement opaque, Safari a besoin du préfixe `-webkit-`, ou un parent avec `filter`, `opacity` ou un masque limite ce que l’élément peut voir. ### backdrop-filter nuit-il aux performances ? C’est possible. Le coût augmente avec la surface floutée et le rayon, et il est payé à nouveau dès que le contenu derrière bouge : gardez les panneaux de verre petits et les rayons modestes. ### Ai-je encore besoin de -webkit-backdrop-filter ? Safari accepte la propriété sans préfixe à partir de la version 18, mais d’anciens iPhone restent en service : livrer les deux lignes reste raisonnable. ### Quelle valeur de flou rend le mieux pour un verre dépoli ? Entre 8px et 20px pour la plupart des interfaces. Ajoutez `saturate()` au-dessus de 100 % pour rendre la couleur que le flou retire.