DA. DA. - 28 days ago 5
CSS Question

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

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...


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">
    <img src="http://placekitten.com/1000/750" width="300px" height="300px"/>
<div id="frost"></div>