Blur Filter for IE 10+

Question

I need to make a blur effect on a div. I know that for Chrome I can use CSS3 filters, and for IE and Firefox I have to use the SVG filter. I can’t understand why my SVG filter doesn’t work in IE 10+, but works fine in Firefox?

Demo: http://jsfiddle.net/8pytt/3/

HTML

<div id="container"> <h1>test</h1> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="5"></feGaussianBlur> </filter> </svg> 

CSS

 body { background: blue; } #container { width: 100%; height: 500px; text-align: center; background: blue; opacity: .8; background-image: -webkit-radial-gradient(circle farthest-side, white, black); background-image: -moz-radial-gradient(circle farthest-side, white, black); background-image: -o-radial-gradient(circle farthest-side, white, black); background-image: -ms-radial-gradient(circle farthest-side, white, black); -webkit-filter: blur(5px); filter:url('#blur'); } h1 { color: red; padding-top: 100px; } 

Answer 1

IE still (at 11 now) does not support filter:blur() . IE10 supports SVG filters, but not for content other than SVG. I would say that you can use foreignObject and change the opacity to rgba opacity , like this one , but it turns out IE does not support foreignObject .

So, either you can convert it all to SVG, or go back to change the opacity or something like that. See here and the linked page for more information.

Even in Edge, CSS filter effects require users to enable a custom flag and not support url() functionality.