[css] Blurring an image via CSS?

On many smartphones (Samsung Galaxy II being an example) when you browse through a photo gallery, its blurred copy is laid out in the background. Can this be achieved by CSS dynamically (ie. without the copy of the photo being prepared upfront saved)? Is there any kind of complex CSS image filter to blur an image?

Yes there is using the following code will allow you to apply a blurring effect to the specified image and also it will allow you to choose the amount of blurring.

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

This code is working for blur effect for all browsers.

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

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

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.

See the following code for more details.

To make an image gray:

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

To give a sepia look:

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

To adjust brightness:

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

To adjust contrast:

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

To Blur an image:

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

You should also do it for different browser. That is include all css statements

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

To use multiple

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

Codepen Demo

CSS3 filters currently work only in webkit browsers (safari and chrome).