Difuminar una imagen a través de CSS?

Con CSS3 podemos ajustar fácilmente una imagen. Pero recuerde que esto no cambia la imagen. Solo muestra la imagen ajustada.

Vea el siguiente código para más detalles.

Para hacer una imagen gris:

img {
 -webkit-filter: grayscale(100%);
}

Para dar un aspecto sepia:

img {
 -webkit-filter: sepia(100%);
}

Para ajustar el brillo:

img {
 -webkit-filter: brightness(50%);
}

Para ajustar el contraste:

img {
 -webkit-filter: contrast(200%);
}

Para desenfocar una imagen:

img {
 -webkit-filter: blur(10px);
}

También debe hacerlo para diferentes navegadores. Es decir, incluir todas las declaraciones css

  filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);

Utilizar múltiples

 filter: blur(5px) grayscale(1);

Este código funciona para el efecto de desenfoque en todos los navegadores.

filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);

Sí, el uso del siguiente código le permitirá aplicar un efecto de desenfoque a la imagen especificada y también le permitirá elegir la cantidad de desenfoque.

img {
  -webkit-filter: blur(10px);
    filter: blur(10px);
}

Los filtros CSS3 actualmente solo funcionan en navegadores webkit (safari y chrome).

img {
  filter: blur(var(--blur));
}