Search code examples
htmlcssinternet-explorer-10blur

CSS blur filter not working in Firefox and IE 10, any alternatives?

I'm using this CSS code for blur effect:

.blur{
-webkit-filter : blur(5px);
-moz-filter    : blur(5px);
-o-filter      : blur(5px);
-ms-filter     : blur(5px);
filter         : blur(5px);
opacity        : 0.4      ;
}

and the blur is working fine in Chrome, but nothing happens in Firefox or IE 10.

I also tried this example http://jsbin.com/ulufot/31/edit but for IE 10, none worked.

I need some advice at this moment, because I'm runing out of ideas...

Solution

  • CSS3 filters are not supported in IE10 or Firefox (v.23), and support is unknown for those browsers in the near future.

    Have a look: http://caniuse.com/#feat=css-filters

    You could use Modernizr to check for CSS filter support and fallback to a background image if not supported.