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.

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

TODO

Formal syntax

How to read CSS 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(5 px);
    max-width: 50%;     max-height: 50%; } {.box {         backdrop - filter: blur(5 px);         backdrop - filter: blur(5 px);         background - color: rgba(255, 255, 255, 0.5);     } } 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

[1]: Chrome feature request: Chromium bug #497522

[2]: bug 1178765

See also

Document Tags and Contributors

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