Propriété CSS `backdrop-filter`

Baseline 2024

Nouvellement disponible

Depuis September 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

En savoir plus
Voir la compatibilité complète

La propriété CSS backdrop-filter permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé derrière l'élément, il peut être observé en ajustant la transparence de l'élément.

Exemple interactif

backdrop-filter: blur(10px);

backdrop-filter: invert(80%);

backdrop-filter: sepia(90%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div id="example-element">Exemple</div>
  </div>
</section>

.example-container {
  background-image: url("/shared-assets/images/examples/balloon.jpg");
  background-size: cover;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}

#example-element {
  font-weight: bold;
  flex: 1;
  text-align: center;
  padding: 20px 10px;
  background-color: rgb(255 255 255 / 0.2);
}

Syntaxe

css

/* Valeur avec un mot-clé */
backdrop-filter: none;

/* Une valeur d'URL vers un filtre SVG */
backdrop-filter: url("common-filters.svg#filter");

/* Valeur de type <filter-function> */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Plusieurs filtres */
backdrop-filter: url("filters.svg#filter") blur(4px) saturate(150%);

/* Valeurs globales */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

Valeurs

none: Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée.
<filter-function-list>: Une liste d'éléments <filter-function> séparés par des espaces ou un filtre SVG qui est appliqué à l'arrière-plan. Les <filter-function> CSS incluent blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() et sepia().

Description

La propriété backdrop-filter applique des effets de filtre aux pixels peints derrière un élément, jusqu'à l'ancêtre le plus proche qui est une racine d'arrière-plan. Le contenu au-dessus de la racine d'arrière-plan n'est pas affecté.

Racine d'arrière-plan

Une racine d'arrière-plan est un élément qui établit une limite pour les effets de backdrop-filter. Les éléments suivants sont des racines d'arrière-plan :

L'élément racine (<html>)
Un élément avec une valeur filter autre que none
Un élément avec une valeur opacity inférieure à 1
Un élément avec une valeur mask, mask-image, mask-border ou clip-path autre que none
Un élément avec une valeur backdrop-filter autre que none
Un élément avec une valeur mix-blend-mode autre que normal
Un élément avec will-change défini sur l'une des propriétés ci-dessus

Cela signifie que si un élément parent a opacity: 0.9, il devient une racine d'arrière-plan et le backdrop-filter de tout enfant ne floute que le contenu entre ce parent et l'enfant — pas le contenu derrière le parent. C'est une source fréquente de confusion lorsque backdrop-filter semble n'avoir aucun effet visible malgré une application correcte.

L'exemple suivant montre comment les racines d'arrière-plan affectent backdrop-filter. Le premier conteneur a will-change: opacity, ce qui en fait une racine d'arrière-plan — remarquez que le cercle flou n'affecte que le texte et le carré à l'intérieur du conteneur, pas l'arrière-plan en damier derrière lui. Le deuxième conteneur n'est pas une racine d'arrière-plan, donc son cercle flou affecte tout ce qui se trouve derrière lui, y compris l'arrière-plan de la page.

html

<div class="parent racine-arriere-plan">
  <div class="texte">Texte</div>
  <div class="carre"></div>
  <div class="superposition"></div>
</div>
<div class="parent">
  <div class="texte">Texte</div>
  <div class="carre"></div>
  <div class="superposition"></div>
</div>

css

body {
  display: flex;
  column-gap: 16px;
  padding: 16px;
  background-image: conic-gradient(
    gray 90deg,
    silver 90deg 180deg,
    gray 180deg 270deg,
    silver 270deg
  );
  background-size: 32px 32px;
}

.parent {
  position: relative;
  width: 256px;
  height: 256px;
}

.racine-arriere-plan {
  outline: 2px solid crimson;
  will-change: opacity;
}

.carre {
  position: absolute;
  top: 35px;
  left: 40%;
  width: 25%;
  height: 25%;
  border: 10px solid white;
}

.texte {
  position: absolute;
  left: 40%;
  color: white;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  line-height: 256px;
  filter: blur(1px);
}

.superposition {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 50%;
  height: 50%;
  outline: 3px solid gainsboro;
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `<defs>` et des éléments graphiques
Héritée	non
Valeur calculée	comme défini
Type d'animation	une liste de fonctions de filtre

Syntaxe formelle

backdrop-filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

Exemples

CSS

css

.boite {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
}

body {
  background-image: url("anemones.jpg");
}

html,
body {
  height: 100%;
  width: 100%;
}

.conteneur {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.boite {
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

HTML

html

<div class="conteneur">
  <div class="boite">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

Résultat

Spécifications

Spécification
Filter Effects Module Level 2 # BackdropFilterProperty

Compatibilité des navigateurs

Voir aussi

La propriété filter
Le type de donnée <filter-function>
Les propriétés background-blend-mode, mix-blend-mode
Effets de filtre CSS
Composition et fusion CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 19 juil. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Propriété CSS backdrop-filter

Aider à améliorer MDN

Propriété CSS `backdrop-filter`