Para utilizar el efecto de desenfocado (también conocido como Blur) en CSS3 tan sólo necesitaremos unas pocas de líneas.

Este efecto se puede aplicar tanto a imágenes, como a divs y demás elementos.

 
Primero tenemos que crear el archivo blur.svg con el siguiente contenido:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

  <filter id="blur">

    <feGaussianBlur stdDeviation="3" />

  </filter>

</svg>

Y ahora en nuestro archivo CSS creamos la clase blur

.blur {
   filter: blur(3px); 
   -webkit-filter: blur(3px); 
   -moz-filter: blur(3px);
   -o-filter: blur(3px); 
   -ms-filter: blur(3px);
   filter: url(blur.svg#blur);
}

El archivo blur.svg lo tendremos que guardar en el mismo directorio donde tenemos nuestro archivo CSS.

 
Ahora ya podremos aplicar nuestra clase para desenfocar alguna fotografía u otro elemento de nuestro sitio web.