backdrop-filter
Baseline 2024Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Thebackdrop-filterCSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everythingbehind the element, to see the effect the element or its background needs to be transparent or partially transparent.
Try it
backdrop-filter: blur(10px);backdrop-filter: invert(80%);backdrop-filter: sepia(90%);<section> <div> <div>Example</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);}Syntax
css
/* 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
noneNo filter is applied to the backdrop.
<filter-value-list>A space-separated list of
<filter-function>s or anSVG 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 | afilter 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()>
<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 / 30%); backdrop-filter: blur(10px);}body { background-image: url("anemones.jpg");}html,body { height: 100%; width: 100%;}.container { background-size: cover; align-items: center; display: flex; justify-content: center; height: 100%; width: 100%;}.box { border-radius: 5px; font-family: sans-serif; text-align: center; max-width: 50%; max-height: 50%; padding: 20px 40px;}HTML
html
<div> <div> <p>backdrop-filter: blur(10px)</p> </div></div>Result
Specifications
| Specification |
|---|
| Filter Effects Module Level 2 # BackdropFilterProperty |
Browser compatibility
Loading…