backdrop-filter

The backdrop-filter CSS property lets you apply effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

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

Syntax

Values

none

No filter is applied to the backdrop.

<filter-function-list>

Space-separated list of filter functions that will be applied to the backdrop. The available 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 
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Example

CSS

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1; 
  backdrop-filter: blur(10px);  
  -webkit-backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}
html,
body {
  height: 100%;
  width: 100%;
}
body {
  background-image: url('http://lorempixel.com/400/200/');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

HTML

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

Result

Specifications

Browser compatibility

[1] Chrome currently implements this feature behind the chrome://flags preference Experimental Web Platform features. See Chromium bug #497522.

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

See also

• filter
• Blog post by Dom Neill with examples
• Building iOS-like transparency effects in CSS with backdrop-filter