backdrop-filter
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 you must make the element or its background at least partially transparent.
Try it
Syntax
css
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url(commonfilters.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( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
<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> ]? )
Examples
CSS
css
.box {
background-color: rgb(255 255 255 / 0.3);
backdrop-filter: blur(10px);
}
body {
background-image: url("anemones.jpg");
}
HTML
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