`backdrop-filter`

Applies filters to the content behind an element. It is the foundation of frosted-glass and glassmorphism interfaces.

88 effects in the catalog use this property.

Syntax

backdrop-filter: blur(12px) saturate(1.4);

Watch out

The element needs a partially transparent background, such as `rgba(255,255,255,.08)`. An opaque background completely hides the filtered backdrop.

These are working effects from the catalog. Open a tile to inspect the full source.