'Blur effect on a div element

Is it possible to add a gaussian blur on div element? If yes, how I can do this?

htmlcssblur


Solution 1:[1]

I think this is what you are looking for? If you are looking to add a blur effect to a div element, you can do this directly through CSS Filters-- See fiddle: http://jsfiddle.net/ayhj9vb0/

 div {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100px;
  height: 100px;
  background-color: #ccc;

}

Solution 2:[2]

Try using this library: https://github.com/jakiestfu/Blur.js-II

That should do it for ya.

Solution 3:[3]

This is what I found:

Demo: http://tympanus.net/Tutorials/ItemBlur/

and Tutorial: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Solution 4:[4]

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

Solution 5:[5]

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

Solution 6:[6]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BenSlight
Solution 2 Riz
Solution 3 Noah Wetjen
Solution 4 Rijo
Solution 5
Solution 6 fatima_r24

Related Questions