I've just noticed that with Yahoo's new email interface upgrade, they've used a blur effect on the background image for one of the GUI windows. I really like this effect and previously thought it to be pletely impossible with javascript and css.

How is this done?

THis is actually an interesting case. When the page first loads, the full image is blurry, and if you look in the sources, you'll see that there is a blurry version of the image saved. After the page loads, the page goes clear excluding the GUI area which stays blurry. Also opening chrome web tools causes the entire page background to go blurry again.

I still haven't figured this out.

I've just noticed that with Yahoo's new email interface upgrade, they've used a blur effect on the background image for one of the GUI windows. I really like this effect and previously thought it to be pletely impossible with javascript and css.

How is this done?

THis is actually an interesting case. When the page first loads, the full image is blurry, and if you look in the sources, you'll see that there is a blurry version of the image saved. After the page loads, the page goes clear excluding the GUI area which stays blurry. Also opening chrome web tools causes the entire page background to go blurry again.

I still haven't figured this out.

• javascript
• css

• See CSS filter#blur – Guillaume Poussel Commented Oct 20, 2013 at 7:40
• I see, but Im seeing this blur in chrome. Have they implemented a filter feature as well? – user2700923 Commented Oct 20, 2013 at 7:43
• blur works in Chrome, too. – Guillaume Poussel Commented Oct 20, 2013 at 7:48
• 3 visit this site for a good lowdown inserthtml./2012/06/css-filters – Deryck Commented Oct 20, 2013 at 7:50
• 1 I've been awake since 6am Friday don't beat yourself up too badly. I like that site too hope it helps. PS - you haven't heard about them because support is still iffy – Deryck Commented Oct 20, 2013 at 7:54

1 Answer 1

In the ments people mention CSS3 blur filter. But, you mention that Yahoo serves two versions of the image - blurred and non-blurred. The reason for the 2 images is that they probably implemented it without using CSS3 blur filter (or at least have a fallback for browsers that don't support blur filters). You could have implemented this effect way back in 1999.

So, here's how you can do it the "classic" way without CSS filters - using good old CSS hackery.

The basic idea for the effect is similar to the sliding window technique and sprites - whereby you use css background positioning to expose or hide portions of the background image.

For this effect, the structure is simply:

 ______________________________________
| main background image                |
|                                      |
|    _____________________             |
|   | inner div with      |            |
|   | blurry background   |            |
|   | image               |            |
|   |                     |            |
|   |                     |            |
|   |_____________________|            |
|                                      |
|______________________________________|

Now, here's the trick:

1. The main background is simply set at 0 0. Nothing unusual
2. The inner div has x and y offset of x y (via top,left or margins or padding)
3. Background of the inner div uses the blurry image.
4. To make the inner div look like part of the main background set the background-position to -x -y

Simple example

#main {
    position: absolute;
    background: url("background.jpg");
}
#inner {
    position: absolute;
    left: 20px;
    top: 30px;
    background: url("blurry_background.jpg") -20px -30px;
}