Crear efecto Desenfoque de Fondo con CSS

Hasta el momento el efecto desenfoque no se puede aplicar con CSS, como si estuvieras aplicando sombra a un texto, pero con ayuda del CSS podemos llegar a un resultado satisfactorio.
Con ayuda de este truco podemos hacer que cualquier capa haga un desenfoque con una imagen de fondo.

Video Tutorial

Resultado Final

Paso 1

Para lograr este efecto necesitaremos dos imágenes, la primera es la que estaría como fondo de la web y la segunda es esa misma imagen de fondo pero con el efecto de desenfoque (puedes hacer el desenfoque en la imagen con cualquier programa de diseño).
Una vez tengas las dos imágenes vamos a usar los siguientes estilos:


Es muy importante que coloquemos fixed en el fondo, para que cuando hagamos scroll el fondo este quieto y tambien logramos que el fondo se coloque con relación a la ventana del navegador, y no al contenedor que tiene el fondo.


Crear efecto Desenfoque de Fondo con CSS Crear efecto Desenfoque de Fondo con CSS Reviewed by Sergio Medina on noviembre 01, 2013 Rating: 5

1 comentario

  1. hola muy buen tuto man. oye me podrías pasar los archivos para hacer unas pruebas? 

    ResponderEliminar

Boletín Semanal

Boletín Semanal