CSS Blur in Ie 11

CSS Blur in IE 11

According to this blog (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) the blur filter was dropped after IE9:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

They did give a solution called StackBlur (using JavaScript and Canvases):

http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

It is in the form of a javascript add-on downloadable from that site.

How to apply a CSS 3 blur filter to a Text/image for Internet Explorer or IE 11

You could make blur filter using SVG gaussian blur! It is work with are modern browsers.

Control in intensity of blur from stdDeviation="4"

Demo

See also

<div class="container" style="height: 613px;">    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591">        <filter id="blurMe">            <feGaussianBlur in="SourceGraphic" stdDeviation="4" />        </filter>        <image filter="url(#blurMe)" xlink:href="http://static1.squarespace.com/static/56d70b042b8dde104d998bda/t/56d9b7e827d4bdab535a3af8/1457109282817/kiddos.jpg?format=1500w" x="0" y="0" height="100%" width="100%"/>    </svg></div>

How to make Blur Effect working in IE

You need to extend your blur filter to elements themselves :

.blur, /* do you neeed it too for IE ? */
.blur p, /* extra for IE  */
.blur div/* extra for IE  */
 {
-ms-filter: blur(2px); 
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius='2', shadowopacity='0.0');
}

So maybe the solution is to set the blur filter via class only to childs :), else filter is applied twice on non relative elements.
blur with relative childs buggs

Filter blur CSS into internet explorer

Before using new property please check feasibility. its not supported with IE.

Caniuse

IE11 making background image text blurry

It is a normal IE bug.

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

i Haven't found any solutions to this subject yet.