W3cubDocs

/CSS

backdrop-filter

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.

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

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

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter