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?

Note that while this is possible with CSS3 'filter: blur(3px)' it is currently extremely expensive in terms of processing power. — Henrik, Dec 03 '12 at 11:08
Here you can find all your answers! [CSS3][1] is the way! (: [1]:http://www.inserthtml.com/2012/06/css-filters/ — Luca Davanzo, Dec 03 '12 at 11:06
My post got deleted. but here was the original link http://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS — surya, Sep 09 '16 at 17:26
[blur filter on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur) — aloisdg, Sep 24 '19 at 15:02

score 45 · Accepted Answer · answered Dec 03 '12 at 11:05

45

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?

answered Dec 03 '12 at 11:05

Andy

13,875
3
46
76

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. – Daniel Ramirez-Escudero Apr 05 '13 at 07:27

Raj Sharma · Answer 2 · 2019-02-06T06:07:46.953

31

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

edited Feb 06 '19 at 06:07

answered Jan 19 '14 at 11:59

Raj Sharma

3,196
3
27
38

@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?> – Faizan Apr 08 '15 at 14:45
Just do it inline, like this: filter: blur(2px) contrast(10%) so far and so on.. – user3522940 Aug 22 '15 at 19:02
1

Demo link is broken. – Kevin Oct 26 '16 at 06:45
None of those are supported by IE – amarinediary Mar 25 '21 at 17:10

score 11 · Answer 3 · answered Dec 15 '15 at 11:47

11

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

answered Dec 15 '15 at 11:47

sameeuor

636
7
16

score 2 · Answer 4 · answered Apr 17 '15 at 23:06

2

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

answered Apr 17 '15 at 23:06

JacobG182

319
1
6

score 0 · Answer 5 · edited Aug 30 '16 at 06:11

0

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

edited Aug 30 '16 at 06:11

Dhaust

5,306
8
50
73

answered Jan 19 '14 at 13:29

Aneesh

255
3
11

Link points to some other article regarding making images grayscale. – Vik Feb 17 '14 at 17:02

score 0 · Answer 6 · edited Jul 06 '17 at 06:47

0

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

edited Jul 06 '17 at 06:47

Roopendra

7,221
16
59
84

answered Jul 05 '17 at 18:41

Bar Horing Amir

3,302
2
20
19

Blurring an image via CSS?

6 Answers6

Linked

Related