The backdrop-filter Property

The backdrop-filter property is one of the most visually striking and modern CSS features. It allows you to apply any of the standard CSS filter functions (like blur, grayscale, sepia, etc.) to the content that sits behind the element.

This is the key to creating the "Frosted Glass" or "Aero Glass" effect commonly seen in modern operating systems and user interfaces.

1. backdrop-filter vs. filter

It is crucial to distinguish between the two filter properties:

Property	Target of the Effect	Use Case
filter	The element itself and all of its content.	Making an image grayscale or blurring a photo.
backdrop-filter	The background content visible through the element's transparent areas.	Creating a translucent, blurred overlay panel.

2. Prerequisites for backdrop-filter

For backdrop-filter to have any visual effect, the element it is applied to must be transparent or translucent. If the element is fully opaque (background-color: white;), you won't see the content behind it, and therefore, the filter will be invisible.

The necessary ingredients for a successful frosted glass effect are:

1. A background element (the content that needs to be blurred).
2. A foreground element positioned above the background.
3. The foreground element must have a semi-transparent background (e.g., rgba(255, 255, 255, 0.2)).
4. The foreground element must have the backdrop-filter applied.

3. Applying the Frosted Glass Effect

The syntax for backdrop-filter is identical to the standard filter property; you simply use the same filter functions.

Example: Creating a Blur Effect

title=

.frosted-panel {
  /* Step 1: Make the element translucent */
  background-color: rgba(255, 255, 255, 0.15); 
  border: 1px solid rgba(255, 255, 255, 0.4); /* Add a light border for definition */
  
  /* Step 2: Apply the filter to the content behind the panel */
  backdrop-filter: blur(12px) saturate(1.5); 
  
  /* Optional: Ensure cross-browser support */
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
}

4. Common backdrop-filter Functions

You can combine multiple filters for unique looks:

Effect	Function	Description
Blur	blur(10px)	Creates the classic frosted glass look.
Inversion	invert(1)	Inverts colors behind the element (e.g., for a "dark mode" effect on bright content).
Grayscale	grayscale(0.8)	Desaturates the background content behind the element.
Hue Rotation	hue-rotate(90deg)	Shifts the colors of the content behind the element.
Contrast	contrast(0.7)	Makes the background content less distinct.

Interactive backdrop-filter Demo

In this demo, the background image is static. The .overlay-card is semi-transparent, and the backdrop-filter: blur() applied to it makes the image visible through the card look blurred, while the text inside the card remains sharp and clear.