How to create a frosted glass effect using CSS?

Question

I\'d like to create a div that is fixed in one position and make it translucent - making the contents behind it partially visible and blurred. The style I\'m lo

Answer 1

You can use CSS image filter.

-webkit-filter: blur(2px);
filter        : blur(2px);

More info on CSS image filters:

• http://techstream.org/Web-Design/CSS3-Image-Filters
• http://html5-demos.appspot.com/static/css/filters/index.html

Demo: JSFIDDLE

---

But in fact, they are using pre processed JPG, and just using it as a overlay in the correct position.

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}


    

Demo: JSFIDDLE