Blur image via CSS?

Question

On many smartphones (an example of Samsung Galaxy II), when you view a photo gallery, its blurred copy is laid out in the background. Can this be achieved using CSS dynamically (i.e. without copying a saved photo in advance)? Is there any sophisticated CSS image filter to blur the image?

Answer 1

You can use CSS3 filters . They are relatively easy to implement, although they are only supported in webkit. Samsung Galaxy 2 browser should support, although, as I think, a web browser?

Answer 2

With CSS3 we can easily customize the image. But remember that this does not change the image. Only the customized image is displayed.

See the following code for more details.

To make the image gray:

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

To give sepia a look:

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

To adjust the brightness:

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

To adjust the contrast:

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

Blur image:

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

You should also do this for another browser. That is, include all CSS statements

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

Use multiple

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

Codepen demo

Answer 3

This code works for the blur effect for all browsers.

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

Answer 4

Yes, the following code is used, which allows you to apply the blur effect to the specified image, and also allows you to choose the blur size.

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

Answer 5

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

Answer 6

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