CSS - backdrop-filter

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.

Example

 

HTML

HTML
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(5px)</p>
  </div>
</div>

CSS

css;highlight[7]
.box {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;<code class="language-css"> 
  backdrop-filter: blur(5px);</code>
  max-width: 50%;
  max-height: 50%;
}

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

Syntax  

CSS
/* 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

none
Keyword indicating that no filter is applied to the backdrop.
<filter-function-list>
Space-separated list of filter functions, which will be applied to the backdrop. The different filter functions are the same as for the filter property.

Formal syntax

CSS
none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#filter-function-list"><filter-function-list></a><p>where <br><code><filter-function-list> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/backdrop-filter#filter-function"><filter-function></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/url" title=""><url></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a></code></p><p>where <br><code><filter-function> = <a href="css/backdrop-filter#blur()"><blur()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#brightness()"><brightness()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#contrast()"><contrast()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#drop-shadow()"><drop-shadow()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#grayscale()"><grayscale()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#hue-rotate()"><hue-rotate()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#invert()"><invert()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#opacity()"><opacity()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#sepia()"><sepia()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#saturate()"><saturate()></a></code></p><p>where <br><code><blur()> = blur( <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> )<br><brightness()> = brightness( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> )<br><contrast()> = contrast( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> )<br><drop-shadow()> = drop-shadow( <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2,3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> <a href="css/color_value" title=""><color></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><grayscale()> = grayscale( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> )<br><hue-rotate()> = hue-rotate( <a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> )<br><invert()> = invert( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> )<br><opacity()> = opacity( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> )<br><sepia()> = sepia( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> )<br><saturate()> = saturate( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/number" title=""><number></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> )</code></p><p>where <br><code><color> = <a href="css/backdrop-filter#rgb()"><rgb()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#rgba()"><rgba()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#hsl()"><hsl()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#hsla()"><hsla()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <hex-color> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#named-color"><named-color></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> currentcolor <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/backdrop-filter#deprecated-system-color"><deprecated-system-color></a></code></p><p>where <br><code><rgb()> = rgb( <a href="css/backdrop-filter#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> )<br><rgba()> = rgba( <a href="css/backdrop-filter#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> , <a href="css/backdrop-filter#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/backdrop-filter#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a> )<br><hsla()> = hsla( <a href="css/backdrop-filter#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/backdrop-filter#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ActiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> AppWorkspace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Background <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> CaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> GrayText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Highlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> HighlightText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoBackground <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Menu <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> MenuText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Scrollbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDDarkShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDLightShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Window <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowFrame <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowText</code></p><p>where <br><code><rgb-component> = <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a><br><alpha-value> = <a href="css/number" title=""><number></a><br><hue> = <a href="css/number" title=""><number></a></code></p>

Description  

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 valuenone
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableyes
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support[1] No support[2] ? ? 9.0-webkit
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support ? ? ? ?

[1] Chrome currently doesn't implement this feature. See Chromium bug #497522.

[2] Gecko currently doesn't implement this feature. See bug 1178765.

See Also  

Specifications  

Specification Status Comment
Filter Effects Module Level 2
The definition of 'backdrop-filter' in that specification.		 Editor's Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/backdrop-filter

CSS CSS Property Graphics Layout NeedsContent NeedsLiveSample NeedsMobileBrowserCompatibility Reference SVG SVG Filter Web