Blurring an image via CSS?

Question

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?

Gritty

Here you can find all your answers! [CSS3][1] is the way! (: [1]:inserthtml.com/2012/06/css-filters – Neal

Note that while this is possible with CSS3 'filter: blur(3px)' it is currently extremely expensive in terms of processing power. – Radarman

My post got deleted. but here was the original link thenewcode.com/534/Cross-browser-Image-Blur-with-CSS – Economy

blur filter on MDN – Gracielagracile

Answer 1

You can use CSS3 filters. They are relatively easy to implement, though are only supported on webkit at the minute. Samsung Galaxy 2's browser should support though, as I think that's a webkit browser?

Amygdaline

this works but unfortunately only with webkit. For now it seems that maybe the only approach is to blur an image with photoshop and place it as background if you want the same effect in each browser. – Gadabout

Answer 2

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

Lightly

@Raj it works. but each of these effects only work one time. I mean when I apply blur, i cannot apply brightness and vice versa. how do I use them multiple?> – Shela

Just do it inline, like this: filter: blur(2px) contrast(10%) so far and so on.. – Cirrose

Demo link is broken. – Guano

None of those are supported by IE – Illuminati

Answer 3

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

Frottage

Answer 4

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

Cranford

Answer 5

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

Olympic

Link points to some other article regarding making images grayscale. – Boudoir

Answer 6

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

Curable