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 an SVG filter. What I cannot figure out is why my SVG filter will not 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 (on 11 now) doesn't support filter:blur(). IE10 supports SVG filters, but not for non-SVG content. I would just say you could use a foreignObject and change the opacity to rgba opacity, like this, but it turns out IE doesn't support foreignObject either.

So either you can convert it all to SVG or fallback to an opacity change or something. See here and the linked page for more info.

Even in Edge, CSS filter effects require users to allow a custom flag and don't support the url() functionality.