Backdrop-filter - Property CSS

backdrop-filter

Summary of characteristics of the `backdrop-filter` property

Quick description

Applies a graphical filter to the clip behind the targeted clip.

Status

Standard

Usable for

HTML

Predefined values

none

Initial value

none

Inherited by default

No.

Animation type

Computed value : during an animation, the backdrop-filter property gradually changes from one value to another.

W3C Module

Filter Effects Module

References (W3C)

Filter Effects Module Level 2

Document status: ED (Editor's draft)

Syntactic schema of `backdrop-filter`.

Syntax scheme of the property backdrop-filter
Detailed syntax

Legend :

filter is a graphical filter, defined by one of the functions: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(().
url is an address of a file, most often, SVG defining a graphical filter.
Multiple functions or URLs can be cited, separated by spaces.

What is the role of the CSS property `backdrop-filter`?

The backdrop-filter property defines a graphical filter (blur, shading, etc.) that will be applied to the element behind the element designated by the selector. For the effect to be visible, it must of course have a transparent background or at least with an opacity of less than 1.

For example, here's what you can get with backdrop-filter.

To make the text easier to read, the background of the background element has been brightened.

The color of the background element has been changed (color rotation with hue-rotate() ) behind this second block.

The contrast of the background element has been reduced to make the text easier to read.

Syntaxes for `backdrop-filter`.

backdrop-filter: none;

Default. No graphic effects are applied.
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() ;

All of these functions apply a graphical filter (contrast, color change, etc.) that can be used with backdrop-filter. Click on the names of the functions to specify their effect or settings.

In the example below, the color of the text is close to that of the gradient in the background, making the text unreadable. You will be able to see the presence of a first line of text by selecting it.
By reducing the brightness of the background on the second line, readability is greatly improved.

Text illegible because in a color close to that of the background

Improved readability with backdrop-filter:brightness(0.5);
backdrop-filter: url() ;

Applies the graphical treatments defined in the specified file (in SVG format).

The example below applies SVG-defined blur to the second line of text to improve readability.
⚠ This example does not work on Firefox (2024).

Text barely legible due to an overly contrasting background

Improved readability with an SVG filter
backdrop-filter:url('#blur');

svg filter id="blur" feGaussianBlur in="SourceGraphic" stdDeviation="15" / /filter /svg
backdrop-filter: blur() sepia() opacity() ;

A series of values, separated by spaces: application of a succession of filters.

Improved readability by blurring and rotating colors

Global values
(common to all properties):


backdrop-filter: initial  (none)
backdrop-filter: inherit
backdrop-filter: revert
backdrop-filter: revertLayer
backdrop-filter: unset

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the property `backdrop-filter`.

The backdrop-filter property can be animated by the graphical functions it uses. Indeed, these functions all accept one or more numerical values as parameters.

Example of an effect obtained by animating
the backdrop-filter property
and the blur() function

Manipulating the `backdrop-filter` property programmatically.

Change the value of `backdrop-filter` to Javascript.

In Javascript, here's how to change the value of backdrop-filter. We can see that Javascript accepts a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with camel-case notation (a capital letter to separate words).


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

Read in Javascript the value of `backdrop-filter`.

For the code below to work, the property must have been assigned directly to the element itself in HTML, via the style attribute, and not by going through a CSS selector.


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

Read the computed value of `backdrop-filter` in Javascript.

The calculated value is always set. It results from the inheritance cascade, and if no value is set for this property, the calculated value will be the initial value of the property (none for backdrop-filter).


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

Change the value of the `backdrop-filter` property with JQuery.

As in Javascript, the name of the property can be written in kebab-case or camel-case.


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

Read the calculated value of the `backdrop-filter` property with JQuery.


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

Other code samples.

More examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test it yourself.

The buttons below apply the entered value to the backdrop-filter property and then display either the value as applied, or the calculated value. This second option allows you to see how the value of backdrop-filter is stored (serialized). In particular, we note that the percentages are well remembered as percentages (see the chapter on inheritance). All other units are converted to pixels.