1. css
  2. /properties
  3. /backdrop-filter

backdrop-filter

Definition

The backdrop-filter property in CSS is used to apply a filter effect to the area behind an element. It can be used to blur, hue-rotate, saturate, or invert the colors of the element's backdrop.

Examples

Applying a blur filter to the backdrop of an element:

.blurred-element {
  backdrop-filter: blur(5px);
}

Applying a hue-rotate filter to the backdrop of an element:

.hue-rotated-element {
  backdrop-filter: hue-rotate(90deg);
}

Applying a saturate filter to the backdrop of an element:

.saturated-element {
  backdrop-filter: saturate(150%);
}

Applying an invert filter to the backdrop of an element:

.inverted-element {
  backdrop-filter: invert(100%);
}

Values

Filter FunctionDescriptionParameter(s)
blurBlurs the element's backdrop.<length> (optional, default is 0)
brightnessAdjusts the brightness of the element's backdrop.<number> (optional, default is 100%)
contrastAdjusts the contrast of the element's backdrop.<number> (optional, default is 100%)
grayscaleConverts the element's backdrop to grayscale.<number> (optional, default is 100%)
hue-rotateRotates the hue of the element's backdrop.<angle> (optional, default is 0deg)
invertInverts the colors of the element's backdrop.<number> (optional, default is 100%)
opacityAdjusts the opacity of the element's backdrop.<number> (optional, default is 100%)
saturateAdjusts the saturation of the element's backdrop.<number> (optional, default is 100%)
sepiaConverts the element's backdrop to sepia.<number> (optional, default is 100%)

Best Practices

  • Use the backdrop-filter property sparingly, as it can have a significant impact on performance.
  • Avoid using the backdrop-filter property on elements that are frequently updated or animated, as this can also impact performance.
  • Consider using the backdrop-blend-mode property in combination with the backdrop-filter property to create more complex effects.
  • Use the backdrop-filter property in combination with media queries to create responsive layouts that adapt to different screen sizes and resolutions.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes