Blur effect on a div element

I got blur working with SVG blur filter:

CSS

-webkit-filter: url(#svg-blur);
        filter: url(#svg-blur);

SVG

<svg id="svg-filter">
    <filter id="svg-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
</svg>

Working example:

https://jsfiddle.net/1k5x6dgm/

Please note - this will not work in IE versions

Blurring the background elements of a div can be achieved using backdrop-filter.

Use it like this:

.your-class-name {
   backdrop-filter: blur(5px);
}

All the elements placed under the div are going be blurred by using this.

EDIT: Notice that this is not supported by every browser yet

you can do quite a few things :

1. filter: blur(10px)

2. backdrop-filter: blur(10px)

3. If you want to blur the edges of the div element, use box-shadow

   box-shadow: 10px 20px 20px grey;

the third value of 20px sets the blur value. The bigger the value, the more the blur.

You can use either of these, although do note that backdrop-filter doesn't have browser support for firefox and internet explorer.