Frosted Glass Effect with CSS and JavaScript

A cross-browser compatible implementation of a frosted glass effect that blurs all content behind the element, not just an image.

The frosted glass effect, where an element has a transparent background that blurs whatever is behind it, is a common UI style found native in many operating systems. Web developers have come up with many ways to fake this effect, but they often just use an image and a blurred copy of it. Any text or other components are not blurred. The new Backdrop filter allows for an actual functioning frosted glass effect where everything behind an element gets blurred. Unfortunately, it is only supported by Safari. This demo is a first-pass at building a functional frosted glass effect for other browsers.

To achieve this effect, we duplicate anything that will be covered by the blurring element. Then we apply either an SVG or CSS blur filter, and crop the blurred content to the proper size.

While it is odd to duplicate a lot of a page's content, with some care this could be used in a production environment. Some thought would have to go into what gets duplicated and whether it can remain in the DOM, or be added and removed every time the window should appear.