CSS: Providing an Alternative for the Unavailable backdrop-filter

The backdrop-filter feature in CSS remains inaccessible in most contemporary browsers. While we anticipate its future support, discovering alternative solutions becomes imperative.

One method to achieve a similar effect is by employing a background with a subtle transparency. The CSS code below demonstrates this approach:

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

When backdrop-filter is not supported, the slightly transparent background will serve as a fallback. Browsers that do support backdrop-filter will display a blurred effect.

Samples illustrating the effects without and with backdrop-filter support are provided below:

[Image of transparent fallback]
[Image of blurred]

By adopting this strategy, you can incorporate a visually appealing filter on elements even in browsers that lack native backdrop-filter capabilities.