We can blur the background using the backdrop-filter
property with a blur effect, like this: backdrop-filter: blur(5px);
.
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()
, andsepia()
.Different effects can be applied to child elements and triggered on hover.
backdrop-filter
propertyThe 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.
backdrop-filter
propertyBelow are some of the values of the CSS backdrop-filter
. The syntax for the backdrop-filter
property is as follows:
/* Keyword value */backdrop-filter: none;/* Global values */backdrop-filter: inherit; /*It adopts the filter effect applied to its parent. */backdrop-filter: initial;/* URL to SVG filter */backdrop-filter: url(commonfilters.svg#filter);
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
.
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 theinitial
property.
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.
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:
/* <filter-function> values */.example-backdrop{-webkit-backdrop-filter: function();backdrop-filter: function();}
Here, the function()
is replaced by different functions that are used with this property. The -webkit-backdrop-filter
is used for older versions of 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
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.
Let's see the example values of these functions below:
backdrop-filter: blur(2px);backdrop-filter: brightness(1.5);backdrop-filter: contrast(1.5);backdrop-filter: grayscale(2);backdrop-filter: hue-rotate(90deg);backdrop-filter: invert(100%);backdrop-filter: saturate(200%);backdrop-filter: sepia(90%);backdrop-filter: opacity(0.5); /* 0.5 for half transparent, 50% for half transparent and 0 for totally disappear. */backdrop-filter: blur(2px) saturate(200%); /* Using multiple filter functions */
Let's have a code example to illustrate how these filters work. Click the "Run" button to see the output:
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.
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.
Haven’t found what you were looking for? Contact Us
Free Resources