In this post I will show a technique that we use to make cross-browser blur-effect. You can use this solution with any framework as it’s completely library-independent and it actually uses 1 line of JS code.

With the latest versions of top notch browsers like Google Chrome, Firefox and Safari, you can always achieve blur-effect using CSS3 “filter”-property:

.cover-image {
filter: blur(12px);
}

IE10+

For previous versions of IE we were able to use DX Filters (alternative to CSS3 filter-property), but starting from IE10 Microsoft removed their support and didn’t present anything instead. That’s why for now the only way to make blur-effect in IE10+ is to use SVG. Here is an example of how it could look like:

In order to reduce complexity I used browser-detection in CSS, which is possible because with JS we can store browser’s userAgent as an attribute of html tag and in CSS we can actually use stored information to perform a detection. With this solution you don’t need to change anything in CSS or JS in order to add few more places with blur-filter. Here is an example of what I mean: