Blur effect in different browsers

Without using anything but pure CSS and a little imagination ... You can superimpose the image to itself, in multiple layers. Make all (except the lower one) a bit transparent. Now shift each image a little in different directions. This is almost the same as applying a simple filter to break in. In other words, blur :)

A practical example is worth a thousand words, then: link

Note that I used four semi-transparent layers, scrolling up, left, right, and below. You can put four more, on the diagonals, to make softening in the corners. Also note that the offset I made is two pixels in each direction. Different values give somewhat different effects.

Editing and Q.: I believe that eight layers with one pixel in each should give a more comfortable effect to the view. Note, however, that it may be somewhat brute force to do this with the image, especially if you are going to do this with not one, but several of them.

I also recommend doing this only with browsers that do not support blur. If the browser supports it, it is better to use the same native blur.

  

"(...) The proposal is to use CSS properties to do this.

If it is only with CSS, no it is possible to create a cross-browser solution. But with a dash of SVG you can get very close.

Here is the complete code and below I explain:

.blur{
    -webkit-filter:blur(10px); /* Webkit + Blink (Chrome, Safari, etc) */
    -ms-filter:'progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)'; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); /* IE 7 < */
    filter: url(blur-filter.svg#10); /* Firefox */
}

Well, come on:

In the first line, the property used is the property that should become default soon, but currently only Chrome / Opera and Safari that accept it.

In the second line we have the "gambiarra" property that Microsoft created for IE8 but still uses its old filter syntax.

In the third line we have the property for older IEs (