Image blur with CSS/[removed] is it possible?

Question

Is it possible to add a blur effect to an image using CSS and Javascript?

Answer 1

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

See live demo and complete source code here

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

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);
}