Cómo crear un efecto de desenfoque con CSS

Hace mucho tiempo vi que Adobe estaba trabajando en llevar sus efectos de Photoshop al CSS para que existieran más efectos que solo el del degradado, la sombra y el brillo. Uno de esos era el efecto gaussiano o desenfoque, pero por ahora todo es un experimento y aunque pudiera aplicarse a uno o dos navegadores, la verdad es que todavía tardaría para volverse un estándar.

Por eso en este tutorial vamos a ver cómo crear el efecto de desenfoque con CSS, usando un truco muy bueno y sencillo ya que no se puede como tal crear un desenfoque, pero haciendo uso del mismo CSS podemos hacer que cualquier capa haga un desenfoque con una imagen de fondo.

Demo del tutorial

CSS

Para este tutorial necesitamos dos imágenes, una que representa la imagen normal, y otra que representa la imagen pero con un efecto de desenfoque previamente añadido en algún programa de diseño. Este efecto funciona únicamente cuando ponemos como fixed el fondo, de tal manera que cuando hagamos scroll el fondo se quede quieto. Al ser fixed también logramos que el fondo se coloque con relación a la ventana del navegador, no al contenedor que tiene el fondo, haciendo que le efecto funciona fielmente.