Effects
backdrop-filter
Style syntax for applying filter effects to the area behind an target element.
Overview
| Class | Declarations |
|---|---|
backdrop-filter:none | -webkit-backdrop-filter: none;
backdrop-filter: none;
|
backdrop-filter:<value>|<…> | -webkit-backdrop-filter: <value> <…>;
backdrop-filter: <value> <…>;
|
backdrop-filter:url(<svg>) | -webkit-backdrop-filter: url(<svg>);
backdrop-filter: url(<svg>);
|
backdrop-filter:blur(<value>) | -webkit-backdrop-filter: blur(<value>);
backdrop-filter: blur(<value>);
|
backdrop-filter:brightness(<value>) | -webkit-backdrop-filter: brightness(<value>);
backdrop-filter: brightness(<value>);
|
backdrop-filter:contrast(<value>) | -webkit-backdrop-filter: contrast(<value>);
backdrop-filter: contrast(<value>);
|
backdrop-filter:grayscale(<value>) | -webkit-backdrop-filter: grayscale(<value>);
backdrop-filter: grayscale(<value>);
|
backdrop-filter:hue-rotate(<degree>) | -webkit-backdrop-filter: hue-rotate(<degree>);
backdrop-filter: hue-rotate(<degree>);
|
backdrop-filter:invert(<value>) | -webkit-backdrop-filter: invert(<value>);
backdrop-filter: invert(<value>);
|
backdrop-filter:sepia(<value>) | -webkit-backdrop-filter: sepia(<value>);
backdrop-filter: sepia(<value>);
|
backdrop-filter:saturate(<value>) | -webkit-backdrop-filter: saturate(<value>);
backdrop-filter: saturate(<value>);
|
backdrop-filter:opacity(<value>) | -webkit-backdrop-filter: opacity(<value>);
backdrop-filter: opacity(<value>);
|
backdrop-filter:drop-shadow(<offset-x>|<offset-y>|<blur-radius>|<color>) | -webkit-backdrop-filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);
backdrop-filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);
|
Examples
Blur content behind an element
Use backdrop-filter:blur(...) to apply a backdrop filter to pixels behind the element.
<header class="bg:white/.72 backdrop-filter:blur(12px)"> ...</header>Generated CSS
@layer utilities { .backdrop-filter\:blur\(12px\) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px) }}Combine with translucent backgrounds
Backdrop filters are only visible when the element lets the backdrop show through, usually with an alpha background.
<div class="bg:white/.64 backdrop-filter:saturate(1.5)">...</div>Reset backdrop filters
Use backdrop-filter:none to disable a backdrop filter.
<div class="backdrop-filter:none@print">...</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="backdrop-filter:none backdrop-filter:blur(12px)@sm backdrop-filter:none@print">...</div>Backdrop filters can be costly and browser-dependent; verify important surfaces in target browsers.