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.
Leave a Reply