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 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

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

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

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 | WindowText

where
<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(5px);
  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

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
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

Document Tags and Contributors

 Contributors to this page: Sebastianz, duncanmcdonald, duvrai, teoli, cvrebert, jwhitlock
 Last updated by: Sebastianz,