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)         


        

Answer 1

Here is a novel blur technique that works across all browsers (including Internet Explorer 10/11) and doesn't require filters, canvas, or JavaScript.

The basic technique is to scale down the image size, and then use a 3D-scaling matrix on the parent to zoom back to full size. This effectively downsamples the image and does a rough blurring effect.

body {
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
}

.container {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
}

#image {
  background-image: url('http://i.imgur.com/HoWL6o3.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  position: absolute;
}

#image.blur {
  transform: matrix3d(1, 0, 0, 0,
                      0, 1, 0, 0,
                      0, 0, 1, 0,
                      0, 0, 0, 0.05);
  background-size: 0 0;
}

#image.blur:before {
  transform: scale(0.05);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-image: inherit;
  background-size: contain;
  background-repeat: inherit;
}

Demo: http://codepen.io/rkogan/pen/jPdGoM/