Blur - Old school images

A fading blur effect achieved with images. This is by far the most well supported method - supported all the way back to IE6.

HTML

<div id="original"></div>
<div class="blur blur1"></div>
<div class="blur blur2"></div>
<div class="blur blur3"></div>
<div class="blur blur4"></div>

CSS

#original, .blur { 
    background: #fff url(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence-sprite.png) no-repeat left top; 
    height: 220px; 
    width: 320px; 
    position: fixed;
}

.blur {
    opacity: 0.5;
}

.blur1 {
    background-position: -2px 0px;
}
.blur2 {
    background-position: 2px 0px;
}
.blur3 {
    background-position: 0px 2px;
}
.blur4 {
    background-position: 0px -2px;
}