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

Answer 2

As far as I know, this is achievable only in Firefox.

The key is background-image: element. One of the properties that would prove most useful , in my opinion, of the ones in the "may be some day" list

Demo working only in FF .. Notice that frost is not a child or a parent of test

img {
  margin-top: 5px;
  margin-left: 40px;
  animation: move 1s infinite;
}

#frost {
  border: solid 1px blue;
  width: 250px;
  height: 250px;
  position: absolute;
  left: 50px;
  top: 120px;
  background-color: white;
  background-image: linear-gradient(rgba(0,0,100,0.2), rgba(0,0,100,0.2)), -moz-element(#test);
  background-position: -45px -112px;
  background-repeat: repeat, no-repeat;
  filter: blur(4px);
  opacity: 1;
}


button:hover {
  background-color: red;  
}
@keyframes move {
  from {transform: translate(0px);}  
    to {transform: translate(40px);}  
}

<div id="test">
    <button>BUTTON</button>
    <img src="http://placekitten.com/1000/750" width="300px" height="300px"/>
</div>
<div id="frost"></div>