backdrop-filter

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.

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

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

Browser compatibility

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

[2]: bug 1178765

See also

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