backdrop-filter
Baseline 2024
Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The backdrop-filter
CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.
Try it
Syntax
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url(common-filters.svg#filter);
/* <filter-function> values */
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%);
/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
Values
none
-
No filter is applied to the backdrop.
<filter-function-list>
-
A space-separated list of
<filter-function>
s or an SVG filter that will be applied to the backdrop. CSS<filter-function>
s includeblur()
,brightness()
,contrast()
,drop-shadow()
,grayscale()
,hue-rotate()
,invert()
,opacity()
,saturate()
, andsepia()
.
Formal definition
Initial value | none |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Computed value | as specified |
Animation type | a filter function list |
Formal syntax
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()>
<url> =
<url()> |
<src()>
<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> ]? )
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Examples
CSS
.box {
background-color: rgb(255 255 255 / 30%);
backdrop-filter: blur(10px);
}
body {
background-image: url("anemones.jpg");
}
HTML
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
Result
Specifications
Specification |
---|
Filter Effects Module Level 2 # BackdropFilterProperty |
Browser compatibility
BCD tables only load in the browser