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.

Browser Support For 'backdrop-filter' Property

70.0*	9.0 -webkit-	76.0	17.0	63.0

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.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website