CSS Blur in IE 11

Question

I have been trying to get A css blur effect in IE 11 for hours and did not make any progress. I tried to use the following simple html:

 <!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            .blur{
                -ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50');
            }
        </style>
    </head>
    <body>

        <img src='http://img3.wikia.nocookie.net/__cb20120627075127/kirby/en/images/0/01/KDCol_Kirby_K64.png' class="blur" />
    </body>

</html>

I also tried just using the filter without the ms prefix. I saw that filter code on http://jsbin.com/ulufot/31/edit and even consulted the microsoft example http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm which does not work in my IE 11 on Win7. Do you have any ideas, what I could be doint wrong?

probably interesting if you are struggling too: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

score 18 · Accepted Answer · edited May 26 '16 at 11:56

18

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.

edited May 26 '16 at 11:56

Oleg

9,341
2
43
58

answered Sep 15 '14 at 14:38

Jeff Clayton

7,053
1
31
36

1

Could you please help in elaborate on how to use this script? There is not good tutorial for it. – Oliver Jul 31 '15 at 12:23
Have you tried the example source code they provide? They also show three simple commands on the page - simple one-liners. Usage: stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel ); or: stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius ); or: stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius ); – Jeff Clayton Jul 31 '15 at 12:39
Those are from the provided page: http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html – Jeff Clayton Jul 31 '15 at 12:40
4

I don't understand those examples. What is blurAlphaChannel? I want to make a 'Div' Blur not image is this possible in IE 11 ?? Please help – Oliver Jul 31 '15 at 12:55
1

RGB (red green blue) - Alpha: Transparency – Jeff Clayton Aug 01 '15 at 20:21

score 10 · Answer 2 · answered Mar 02 '17 at 17:38

10

Here's a solution that works in IE10+ by using SVG: https://jsfiddle.net/joegeringer/g97e26pa/8/

<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />

</svg>

answered Mar 02 '17 at 17:38

joegeringer

101
1
4

@JeffClayton Those references are simply for demonstrating the code here, LoremPixel.com returns random images of the specified sizes. – jarodsmk Sep 27 '17 at 08:17
This is terrific! – Jeff Clayton Sep 27 '17 at 12:33
1

Bear in mind: you can't use this SVG image with linked image as background like `body { background-image: url(blurred.svg); }` even if you inline it via `url("data:image/svg+xml;base64,CODE") trick`, e.g. [this service](https://websemantics.uk/tools/svg-to-background-image-conversion/) – izogfif Oct 04 '17 at 11:54

CSS Blur in IE 11

2 Answers2

Linked