What is the backdrop-filter property in CSS?

Key takeaways

• The backdrop-filter property applies visual effects (e.g., blur, color adjustments) to the background behind an element.

• The element or its background must be partially transparent for the filter to work.

• Some commonly used values for the filter are:

  • none: This disables the filter.

  • inherit: This inherits from the parent element.

  • initial: This resets to default.

• The property includes different filters like blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), saturate(), and sepia().

• Different effects can be applied to child elements and triggered on hover.

The backdrop-filter property

The CSS backdrop-filter property allows us to apply visual effects like blurring or altering colors to the area behind an element. It is similar to the filter property, but instead of applying the effects to the element itself, it applies them to the background.

To see the effect of backdrop-filter property, the element or its background must be at least partially transparent. This can be achieved by setting the opacity property to a value less than one, or by using a transparent background color.

Syntax for backdrop-filter property

Below are some of the values of the CSS backdrop-filter. The syntax for the backdrop-filter property is as follows:

• Line 2: The none value of the backdrop-filter effectively disables any backdrop filter that may have been applied to an element. When we set backdrop-filter to none, it tells the browser to not apply any backdrop filter effect to the element or the area behind the element. This is useful if you want to remove a previously applied backdrop filter, effectively returning the backdrop to its normal appearance with no filter effects.

• Line 5: The inherit value instructs the element to inherit the backdrop-filter property from its parent element.

• Line 6: The initial value sets the backdrop-filter property to its default value, effectively removing any custom filter effect applied to the element.

• Line 9: The backdrop-filter property applies filter effects to the area behind an element using a filter defined in the external SVG file commonfilters.svg with the ID filter.

Using backdrop-filter property

Take a look at some of the examples of backdrop-filter property in the following code playground:

We have a parent <div> with the class .parent and several child <div> elements with the class .child and different child classes (.child1, and .child2) representing different scenarios for the backdrop-filter property as defined in the CSS file (styles.css).

Note: The effect will be shown on child 1 as it is using the property, inherit. Whereas, the child 2 will have no effect as it is using the initial property.

Code explanation

Let's take a look at the different global values that the child element uses in style.css file:

• Line 8: The .child1 element uses the inherit value. This means that it will inherit the backdrop filter from its parent. In this case, it's going to be the brightness() filter effect.

• Line 12: The .child2 element uses the initial value. This is the default value defined by the CSS specification. Since, we haven't defined an initial value for backdrop-filter, the initial value is none. This means no filter effect will be applied to the background behind this element.

In the code shown above, on line 3, the parent element uses the brightness() filter function. The backdrop-filter property in CSS can accept a variety of filter functions, each allowing us to apply different visual effects to the area behind an element. Let’s take a look at what these are in detail.

Filter functions with backdrop-filter property

The backdrop-filter property accepts a variety of filter functions that can have different backdrop effects. The syntax for the filter function is:

Here, the function() is replaced by different functions that are used with this property. The -webkit-backdrop-filter is used for older versions of webkit-basedIt includes Safari web browser and other iOS web browsers. browsers and backdrop-filter is used for modern browsers.

Some of the most commonly used filter functions in CSS, that are used space-separated are listed below:

• blur(): This creates a blur effect on the area behind an element. This function allows us to control the degree of blurriness applied to the backdrop.

• brightness(): This controls the brightness of the background of an element.

• contrast(): This controls the contrast of the area behind an element, making it more or less distinct.

• grayscale(): This applies a grayscale or black-and-white effect to the area behind an element.

• hue-rotate(): This applies a hue rotation It allows us to shift the colors of the content along the color wheel. effect to the area behind an element.

• invert(): This creates an inverted or negative effect on the area behind an element. It inverts the colors of the backdrop, making dark colors appear lighter and light colors appear darker.

• saturate(): This controls the saturation of the area behind an element, making it more or less colorful.

• sepia(): This transforms the original image into a sepia tone, imparting a warmer and more yellowish-brown tint to the image's appearance.

• opacity(): This applies transparency to the samples in the input image.

Code example

Let's see the example values of these functions below:

Let's have a code example to illustrate how these filters work. Click the "Run" button to see the output:

Code explanation

CSS file

• Lines 1–5: This is a CSS class selector. It selects an HTML element with the class attribute set to "row-container". This is used to add the style to the main container to arrange the elements within this div row-wise, which is implemented by setting the flex-direction property value to row. The justify-content is just there to settle the content space-evenly .

• Lines 6–9: This is a CSS class selector targeting an HTML element with the class attribute set to "Img1". It is applied to the first image in our HTML code. Here, we resize the image to 550 pixels in height and 750 pixels in width.

• Lines 10–19: This is a CSS class selector targeting an HTML element with the class attribute set to "content1". Here, we set the element's position to be absolute, allowing for precise placement within its parent container. The top and left properties are used to vertically and horizontally place content1 element. We applied a semi-transparent white background color with an alpha value of 0.4, creating a slightly transparent backdrop. Then we styled it a bit more by giving it padding, margin, and a bold font-weight to enhance its appearance. We set its width so that it will be the same for each box.

• Line 18: Here, we use the backdrop filter to apply a three-pixel blur effect to the content1 element, making its background and content appear blurred.

• Lines 21–23: This will revert the blur effect that was applied above. This CSS property will be applied when it's hovered.

• Lines 34–36: Here, we use the backdrop filter to apply a brightness effect to the content2 element, making its background bright. This CSS property will apply the effect when it's hovered.

• Lines 47–49: Here, we use the backdrop filter to apply a contrast effect to the content3 element when hovered.

• Lines 60–62: Here, we use the backdrop filter to apply a grayscale effect to the content4 element when hovered.

• Lines 73–75: Here, we use the backdrop filter to apply a hue-rotate effect to the content5 element when hovered.

• Lines 87–89: Here, we use the backdrop filter to apply the invert effect to the content6 element when hovered.

• Lines 100–102: Here, we use two backdrop filters at once to apply the blur and saturate effect to the content7 element when hovered.

• Lines 113–115: Here, we use the backdrop filter to apply the sepia effect to the content8 element when hovered.

Conclusion

The CSS backdrop-filter property is a valuable addition to web designers' toolkits, allowing for the creation of visually stunning effects with ease. Whether we want to add a touch of elegance with a frosted glass background or create dynamic hover effects, backdrop-filter empowers us to do so without complex JavaScript or image manipulation. As we experiment with this property, we'll discover endless possibilities for enhancing our web designs and captivating our audience with engaging visuals.