backdrop-filter
Style syntax for applying filter effects to the area behind an 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
The foreground panel filters pixels behind it. Compare the same translucent panel before and after blur; its own text stays sharp.
<!-- No filter · sharp backdrop --><div class="rel h:168px w:240px max-w:100%"> <img src="/demo/landscape.svg" width="320" height="200" alt="" class="block h:168px w:240px max-w:100% object-cover" /> <div id="target" class="abs inset-md flex items-center justify-center p-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base/.64 text-strong backdrop-filter:none"> Preview layer </div></div><!-- Blur · softened backdrop --><div class="rel h:168px w:240px max-w:100%"> <img src="/demo/landscape.svg" width="320" height="200" alt="" class="block h:168px w:240px max-w:100% object-cover" /> <div id="target" class="abs inset-md flex items-center justify-center p-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base/.64 text-strong backdrop-filter:blur(8px)"> Preview layer </div></div>Generated CSS
@layer utilities { .backdrop-filter\:blur\(8px\) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }}The complete example supplies the image, positioned panel and translucent background. The panel’s border box bounds the visible filtered area. The effect stays inside this iframe.
Combine with translucent backgrounds
A translucent background lets the filtered result show through. An opaque background covers it even though the computed filter remains active.
<!-- Translucent · filtered pixels visible --><div class="rel h:168px w:240px max-w:100%"> <img src="/demo/landscape.svg" width="320" height="200" alt="" class="block h:168px w:240px max-w:100% object-cover" /> <div id="target" class="abs inset-md flex items-center justify-center p-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base/.48 text-strong backdrop-filter:saturate(0)"> Preview layer </div></div><!-- Opaque · filtered pixels covered --><div class="rel h:168px w:240px max-w:100%"> <img src="/demo/landscape.svg" width="320" height="200" alt="" class="block h:168px w:240px max-w:100% object-cover" /> <div id="target" class="abs inset-md flex items-center justify-center p-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base text-strong backdrop-filter:saturate(0)"> Preview layer </div></div>These panels both remove backdrop saturation. Only their background alpha differs. Keep enough surface contrast for text in each theme; applying opacity to the whole panel would also fade its text.
Reset backdrop filters
Use backdrop-filter:none to restore the unfiltered backdrop. Open print preview to disable blur on this panel.
<!-- Blur on screen · none in print --><div class="rel h:168px w:240px max-w:100%"> <img src="/demo/landscape.svg" width="320" height="200" alt="" class="block h:168px w:240px max-w:100% object-cover" /> <div id="target" class="abs inset-md flex items-center justify-center p-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base/.64 text-strong backdrop-filter:blur(8px) backdrop-filter:none@print"> Preview layer </div></div>The translucent background remains declared. Removing a backdrop filter does not remove the panel or its background color.
Apply conditionally
Widen the preview to sm to blur the backdrop. Print keeps the original sharp image behind the same panel.
<!-- No filter → blur at sm --><div class="rel h:168px w:240px max-w:100%"> <img src="/demo/landscape.svg" width="320" height="200" alt="" class="block h:168px w:240px max-w:100% object-cover" /> <div id="target" class="abs inset-md flex items-center justify-center p-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base/.64 text-strong backdrop-filter:none backdrop-filter:none@print backdrop-filter:blur(8px)@screen@sm"> Preview layer </div></div>The utility emits standard and WebKit-prefixed declarations. Backdrop sampling can vary with browser support and surrounding compositing contexts; verify the actual surface in target browsers. Keep the content readable when the effect is unavailable.