CSS blur filters and browsers war

After the flat design came under the trend, the needs of designers increased and coders wanted most of them natively to better support the development process and the performance of the website. The blur effect is one of the most popular stuff in design change. Those headings, buttons and overlaying stuff over a blur background is one those most stunning and sexy design. However, browsers aren't on our side.
First there are several ways of doing the blur with CSS. First is traditional or tricky way.

Traditional (tricky) way

According to me this is not a productive way of performing the blur. However, it is one of the most browser supported way. An image (original) is used as a background of certain space and then a photoshoped image, that is the blur is used as a separate image. The CSS property of background is used and basically blur is not done in CSS way.

The tutorial on this trick I found on Codepen demos, CSS- Tricks and several more places. Before introduction of better ways of performing blur, this was the most popular one and there is only one reason to like this is : browser support.

See the Pen Blurred Background CSS by Rian Ariona (@ariona) on CodePen.

My reason of unlikeness of this way is: use of two images increases the size, no proper way of performing blur coming directly from server and human effort is there to blur each and ever image. In short it sucks!

CSS Filter

CSS filters are right now most popular.

"Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG" - CanIUse. 

However support is not that as good as the above traditional way but neither regrettable. After the arrival of Edge Internet Explorer users are declined but IE11, IE10 and IE9 are still considered as the part of a development project to safeguard the user diversity. This method is not recommended in development project unless some measures are taken. 

IE No Support	Chrome 31	Edge 13	Firefox 38	Opera 32	Safari 8	iOS Safari 8.4	Android Browser 4.4

These filter are widely used in different ways to ignite some more creative sparks under the play area.

-webkit-filter:blur(5px);  // Fil

filter:blur(5px);

See the Pen Depth of field effect with SVG filters by Vaughan Curd (@vcurd) on CodePen.

The above demo is a creative examples of putting some images in order of the index. All the images exist in two co-ordinate system but a 3D effect is obtained. A few more lines of jQuery created the focus effect. Awesome!!!

Backdrop Filter

This is somewhere when browsers just simply ignored the background blurring. All the browsers except Safari and iOS Safari 9 are not supporting this property and I don't know why. Since there can be no demonstration neither discussion therefore lets move on.

SVG Filters

See the Pen Blur Animation: SVG Filter + CSS Transition by Riccardo Tartaglia (@riktar) on CodePen.

The Above demo uses SVG filters, they are not the part of CSS however have a greater browser support.

IE 10	Chrome 31	Edge 12	Firefox 38	Opera 32	Safari 8	iOS Safari 8.4	Android Browser 4.4

SVGs are not part of this post, but I might share some SVG stuff soon. As far as blurring is concerned, I think CSS filters have great potential, perhaps for browser sake we are not using them. They might be in browser support soon. Comment to share your opinion below.