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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

img     filter  blur var --blur

User · Answer

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

User · Answer

CSS3 filters currently work only in webkit browsers  safari and chrome

[css] Blurring an image via CSS?

Examples related to css

Examples related to image

Examples related to effects