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 CS

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