filter: blur(1px); doesn't work in Firefox, Internet Explorer, and Opera

css internet-explorer firefox browser opera

Thomas Lai · Apr 4, 2013 · Viewed 72.1k times · Source

I have a problem with CSS. When I try to do

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

it looks perfect in Safari and Chrome, but the blur doesn't show up at all in Firefox, Opera, or Internet Explorer. Do those browsers support it? Or is there another method of getting the entire page to blur?

Answer

Try with SVG filter.

img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

<img src="https://i.stack.imgur.com/oURrw.png" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

filter: blur(1px); doesn't work in Firefox, Internet Explorer, and Opera

Answer

Related questions