Backdrop-filter - Propriété CSS

Schéma de la syntaxe de backdrop-filter.

Description des termes utilisés sur le schéma :

• filter est un filtre graphique, défini par une des fonctions : blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(().
  
• url est une adresse vers un fichier, le plus souvent, SVG définissant un filtre graphique.
• Plusieurs fonctions ou plusieurs URL peuvent être citées, séparées par des espaces.

Quel est le rôle de la propriété CSS backdrop-filter ?

La propriété backdrop-filter définit un filtre graphique (flou, ombrage, etc) qui sera appliqué sur l'élément situé derrière l'élément désigné par le sélecteur. Pour que l'effet soit visible, ce dernier doit bien entendu avoir un arrière-plan transparent ou au moins avec une opacité inférieure à 1.

Voici par exemple ce qu'il est possible d'obtenir avec backdrop-filter.

Valeurs pour backdrop-filter.

• backdrop-filter: none;

  Valeur par défaut. Aucun effet graphique n'est appliqué.

• backdrop-filter: blur(); backdrop-filter: brightness(); backdrop-filter: contrast(); backdrop-filter: drop-shadow(); backdrop-filter: grayscale(); backdrop-filter: hue-rotate(); backdrop-filter: invert(); backdrop-filter: opacity(); backdrop-filter: sepia(); backdrop-filter: saturate();

  Toutes ces fonctions appliquent un filtre graphique (contraste, changement des couleurs, etc.) qui peut être utilisé avec backdrop-filter. Cliquez sur les noms des fonctions pour plus de précision sur leur effet ou leur paramétrage.

  Dans l'exemple ci-dessous, la couleur du texte est proche de celle du dégradé en arrière-plan, rendant le texte illisible. Vous pourrez constater la présence d'une première ligne de texte en la sélectionnant.
  En réduisant la luminosité de l'arrière-plan sur la deuxième ligne, on améliore beaucoup la lisibilité.

  Texte illisible car dans une couleur proche de celle de l'arrière-plan

  Amélioration de la lisibilité avec backdrop-filter:brightness(0.5);
• backdrop-filter: url();

  Applique les traitements graphiques définis dans le fichier indiqué (en format SVG).

  L'exemple ci-dessous applique un flou défini en SVG à la deuxième ligne de texte afin d'améliorer la lisibilité.
  ⚠ Cet exemple ne marche pas sur Firefox   (2024).

  Texte à peine lisible à cause d'un arrière-plan trop contrasté

  Amélioration de la lisibilité avec un filtre SVG
  backdrop-filter:url('#blur');
  svg filter id="blur" feGaussianBlur in="SourceGraphic" stdDeviation="15" / /filter /svg
• backdrop-filter: blur() sepia() opacity();

  Une série de valeurs, séparées par des espaces : application d'une succession de filtres.

  Amélioration de la lisibilité par application d'un flou et d'une rotation des couleurs
• backdrop-filter: initial; (none) backdrop-filter: inherit; backdrop-filter: revert; backdrop-filter: revertLayer; backdrop-filter: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de backdrop-filter.

La propriété backdrop-filter peut être animée grâce aux fonctions graphiques auxquelles elle fait appel. En effet ces fonctions acceptent toutes une ou plusieurs valeurs numériques en paramètre.

Accéder à la propriété backdrop-filter par programme.

Modifier la valeur de backdrop-filter en Javascript.

En Javascript, voici comment modifier la valeur de backdrop-filter. On voit que Javascript accepte une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['backdrop-filter'] = 'blur()'; // ou let el = document.getElementById('id'); el.style.backdropFilter = 'blur()';

Lire en Javascript la valeur de backdrop-filter.

Pour que le code ci-dessous fonctionne, la propriété doit avoir été affectée directement à l'élément lui-même en HTML, via l'attribut style, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['backdrop-filter']; // ou let el = document.getElementById('id'); let value = el.style.backdropFilter;

Lire la valeur calculée de backdrop-filter en Javascript.

La valeur calculée est toujours définie. Elle résulte de la cascade d'héritage, et si aucune valeur n'est définie pour cette propriété, la valeur calculée sera la valeur initiale de la propriété (none pour backdrop-filter).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('backdrop-filter');

Modifier la valeur de la propriété backdrop-filter avec JQuery.

Comme en Javascript, le nom de la propriété peut être écrit en kebab-case ou en camel-case.


$('#id').css('backdrop-filter', 'blur()');
// ou
$('#id').css('backdropFilter', 'blur()');


Lire la valeur calculée de la propriété backdrop-filter avec JQuery.

let value = $('#id').css('backdrop-filter');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété backdrop-filter et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de backdrop-filter. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages (voir le chapitre sur l'héritage). Toutes les autres unités sont converties en pixels.

Exemple interactif avec la propriété backdrop-filter.

Prise en charge de backdrop-filter par les navigateurs.

La propriété backdrop-filter est maintenant reconnue par la plupart des navigateurs récents.

1

Propriété
backdrop-filter

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété backdrop-filter.

• Module effets et filtres - Niveau 2

  Concernant backdrop-filter. Mise à l'étude de la propriété backdrop-filter.
  

  01 Août 2024

  Document de travail des éditeurs.

  

  

  

  

Voir aussi, au sujet des filtres graphiques.

Les filtres et effets graphiques divers sont décrits dans la spécification nommée "Module filtres et effets" en français, ou "Module filtres et effets" en anglais. Tous les textes de standardisation sont publiés par le W3C. Voici les termes relatifs aux filtres graphiques :

Propriétés :

Fonctions :