This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Summary
The backdrop-filter
property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element's transparency/opacity.
Initial value | none |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | yes |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);
/* Filter functions */
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: unset;
Values
TODO
Formal syntax
How to read CSS syntax.none | <filter-function-list>where
<filter-function-list> = [ <filter-function> | <url> ]+
where
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>
where
<blur()> = blur( <length> )
<brightness()> = brightness( [ <number> | <percentage> ] )
<contrast()> = contrast( [ <number> | <percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( [ <number> | <percentage> ] )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( [ <number> | <percentage> ] )
<opacity()> = opacity( [ <number> | <percentage> ] )
<sepia()> = sepia( [ <number> | <percentage> ] )
<saturate()> = saturate( [ <number> | <percentage> ] )where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
Example
HTML
<div class="container">
<div class="box">
<p>backdrop-filter: blur(5px)</p>
</div>
</div>
CSS
.box {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
backdrop - filter: blur(5 px);
max-width: 50%;
max-height: 50%;
}
{.box
{
backdrop - filter: blur(5 px);
backdrop - filter: blur(5 px);
background - color: rgba(255, 255, 255, 0.5);
}
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url('https://pixabay.com/static/uploads/photo/2014/08/26/20/06/lonely-428380_960_720.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
Filter Effects Module Level 2 The definition of 'backdrop-filter' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | No support[1] | No support[2] | ? | ? | 9.0-webkit |
[1]: Chrome feature request: Chromium bug #497522
[2]: bug 1178765