svg filters - Is the 'frosted glass' effect implementable with CSS only at this time?

Question

The frosted glass effect (where an overlay both blurs and tints what is below it) is a common UI element in iOS.

Is there currently anyway to implement that with CSS? There are a lot of questions pertaining to this, but they are limited in what they can do. They typically are limited to putting an overlay over an image--rather than a completely rendered UI.

So, to be clear, I'm not looking for a way to blur an image by itself, but a way to blur the UI below an element. So say I have an HTML form with HTML buttons and HTML text, and I want to place a div above them all so that whatever is below looks blurred. And then I can perhaps scroll what is below and as elements come in and out of the overlay, they are blurred only while under the div.

My understanding is that the answer to this is no, this is not currently possible with CSS but I'm also a bit rusty on the new bells and whistles...

Answer 1

What you are looking for is backdrop-filter, which has been in webkit since August 2015 (see post). It was shipped in Safari 9 (September 30, 2015, part of OS X El Capitan) and works in Chrome today by enabling the Experimental Web Platform features [...] flag.

With backdrop-filter, getting the 'live blur' is as easy as adding backdrop-filter: blur(10px) to a given element.

Demo here.

It's probably going to be a while until it becomes mainstream though, but it's going to enable us to do so much more than the frosted glass effect (i.e. night mode, read more here). The good news is that tons of people are excited about it, so let's hope we don't have to wait long. If curios, here's the spec for it.

If you want to track progress on this feature, check out:

• Mozilla bug
• Chrome bug & Chrome status
• Microsoft bug