iOS 7's blurred overlay effect using CSS?

javascript css user-interface blur
Lumpy picture Lumpy · Jun 11, 2013 · Viewed 161.7k times · Source

It seems Apple's overlay is more than just a transparency. Any ideas on how to achieve this effect with CSS and possibly JS?

More than just transparency

Answer

Cana picture Cana · Jun 11, 2013

It is possible with CSS3 :

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Example here => jsfiddle

Related questions

Easiest css for Facebook style "red" notifications

I need a facebook style notification, but getting something that looks nice cross browser seems tricky. For example, different browsers seem to treat paddings differently, resulting in weird looking notifications. What is the best cross-browser way of ensuring the notifications …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More