CSS backdrop-filter

The backdrop-filter property in CSS allows you to apply graphical effects like blurring or color shifting to the area behind an element. It is similar to the filter property, but it applies the effect to the area behind the element instead of to the element itself.

This property is useful for creating a frosted glass effect, where the content behind an element is blurred or altered in some way to create a visually interesting effect.

List of filters

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
sepia()
saturate()

Syntax

The syntax for the backdrop-filter property is:


.element {
  backdrop-filter: <filter-function>;
}

Example

div.background {
  background:  url(../../images/example/pyramid.jpg) no-repeat center;
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 400px;
  width: 400px;
}

div.content {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
  color:black;
}

Result:

This is a sample text with a backdrop filter applied.

In the example above, a backdrop filter is applied to the content within the <div> element.