Make Images Blur in CSS : CSS blur Property

Have you ever notice that CSS also has blur property?
In spite that there are also properties like brightness , contrast , shadow , grayscale , opacity , sepia etc.
Free feel to learn this all on this blog. Subscribe to this blog now!

1.1 CSS FILTERS
Filter property defines visual effects to a <img> tag.Among the many filter properties , one is Blur.
Filter has default value - none.It came with CSS3 and workes on all browsers with CSS3.

1.2 BROWSER SUPPORT
Blur filter property supports chrome 53.0 -webkit- , MS edge 13.0+, Mozilla firefox 35.0+,Sufari 9.1 and Opera 40.0 -webkit-.
The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.

1.3 USING FILTER PROPERTY
As said above, default value of filter is none.To add blur property, we have to change filter value none to blur and add values in pixels in the bracket.

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

As shown above,5px blur is applied to a <img>.You will have to provide a length value which will determine how many pixels need to blend into each other. This implies that a larger value will provide a more blurry image.In this case you cannot use percentage(%) to determine the blur radius.But em or mm units are applicable.

Keep in mind that the blur() filter does not support negative values.