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

Question

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 1

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>

Answer 2

filter: blur(3px); -webkit-filter: blur(3px); -ms-filter: blur(3px); filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='3'%20/></filter></svg>#blur"); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');