CSS 'backdrop-filter' Property Explained

The CSS 'backdrop-filter' property applies graphical effects such as blurring or color shifting to the area behind an element. This can create the impression that the background behind the element with the backdrop-filter applied is seen through a modified lens. This property is useful for creating frosted glass effects, enhancing overlays, or any context where the background should be visually altered behind an element.

CSS 'backdrop-filter' Property Example

See the Pen CSS 'backdrop-filter' Property by Webzstore (@webzstore) on CodePen.

The 'backdrop-filter' property opens up creative possibilities for enhancing web pages' visual hierarchy and interactivity by allowing designers to apply filter effects directly to the backdrop of elements.

Why the effect needs a transparent background

The filter is applied to whatever is painted behind the element, but the element's own background is painted on top of that. If the element has a fully opaque background, nothing behind it can be seen, so the blur or colour shift is invisible. For the effect to show, the element or its background must be transparent or partly transparent. A semi-transparent background colour lets the filtered backdrop show through, and also gives the text a tint to sit on.

/* Opaque background: the backdrop is hidden, so the blur is not visible */
.panel-opaque {
  background-color: #ffffff;
  backdrop-filter: blur(10px);
}

/* Partly transparent background: the blurred backdrop shows through */
.panel-glass {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
}

Provide a readable fallback for browsers that do not support the property, and make sure the text keeps enough contrast over the filtered backdrop. A low-opacity background is only readable if the filter is applied, so keep a more opaque background by default and make it more transparent only where backdrop-filter is supported.

.panel {
  /* Fallback: mostly opaque, readable without the blur */
  background-color: rgb(255 255 255 / 92%);
  color: #1a1a1a;
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .panel {
    background-color: rgb(255 255 255 / 30%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

MDN notes that a parent with opacity below 1, a filter, a mask, a clip-path or a similar property becomes a "backdrop root", which limits what the filter can see to the content between that parent and the element. Check the contrast of the text against the lightest and darkest parts of the page that can appear behind the panel, and remember that blur filters can be demanding on slower devices.

Browser Support For 'backdrop-filter' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for backdrop-filter for the full compatibility details, including mobile browsers.

CSS Syntax of the 'backdrop-filter' Property

backdrop-filter: none | <filter-function-list>;

Usage of the 'backdrop-filter' Property

Use the 'backdrop-filter' property when applying a filter effect (like blur or grayscale) to the area behind an element, not the element itself. It's commonly used in modal dialogs, sidebars, or any floating element where you wish to maintain focus by subtly modifying the backdrop to be less distinct or more stylized.

Property Values of the 'backdrop-filter' Property

• None: The default value indicating no filter will be applied to the backdrop.
• Blur(px): Applies a Gaussian blur to the backdrop. The parameter defines the blur radius.
• Brightness(%): This adjusts the brightness of the backdrop. Values over 100% make the backdrop brighter, while values under 100% darken it.
• Contrast(%): This variable alters the contrast of the backdrop. Values above 100% increase contrast, whereas values below 100% decrease it.
• Grayscale(%): This function converts the backdrop to grayscale. A value of 100% is completely grayscale, while 0% is the original.
• Invert(%): Inverts the colors of the backdrop. 100% is fully inverted, and 0% is the original.
• Sepia(%): Applies a sepia tone to the backdrop. 100% is full sepia, and 0% is the original.
• Saturate(%): Adjusts the saturation of the backdrop. Values above 100% enhance saturation, while values below 100% desaturate.
• Opacity(%): Applies transparency to the backdrop. 100% is fully opaque (original), and 0% is completely transparent.
• Hue-rotate(deg): Rotates the hues of the backdrop around the colour wheel by the given angle.
• Drop-shadow(): Applies a drop shadow to the backdrop, using the same arguments as the CSS drop-shadow() filter function.
• url(): References an SVG filter.

You can combine several filter functions in one list, for example backdrop-filter: blur(4px) saturate(150%);. Per MDN, older browser versions may need the -webkit-backdrop-filter prefix.