Web/CSS/backdrop-filter

The backdrop-filter CSS property lets you apply graphical 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-function> values */
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>: A space-separated list of <filter-function>s or an SVG filter that will be applied to the backdrop.

Formal definition

Initial value	`none`
Applies to	all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	a filter function list

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()> | <saturate()> | <sepia()>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> ] )<saturate()> = saturate( <number-percentage> )<sepia()> = sepia( <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} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

CSS

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1; 
 -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);  
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  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

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`backdrop-filter`	Chrome Full support 76 Full support 76 Full support 47 Disabled' Disabled' From version 47: this feature is behind the `Enable Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 17	Firefox Full support 70 Disabled' Full support 70 Disabled' Disabled' From version 70: this feature is behind the `layout.css.backdrop-filter.enabled` preference (needs to be set to `true`) and the `gfx.webrender.all` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 34 Disabled' Full support 34 Disabled' Disabled' From version 34: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari Full support 9 Prefixed' Full support 9 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 76	Chrome Android Full support 76 Full support 76 Full support 47 Disabled' Disabled' From version 47: this feature is behind the `Enable Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android No support No Notes' No support No Notes' Notes' See bug 1178765.	Opera Android Full support 54 Full support 54 Full support 34 Disabled' Disabled' From version 34: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari iOS Full support 9 Prefixed' Full support 9 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 12.0

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.