83

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

Guy
  • 10,931
  • 5
  • 36
  • 47
bialasikk
  • 995
  • 1
  • 7
  • 8
  • 1
    What have you found so far? Have you googled this issue? – Erty Seidohl Aug 15 '12 at 20:54
  • possible duplicate of [HTML5 Gaussian blur effect](http://stackoverflow.com/questions/2975089/html5-gaussian-blur-effect) – Chris Laplante Aug 15 '12 at 20:55
  • possible duplicate of [How to apply a CSS 3 blur filter to a background image that I am setting with background-image?](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am-setting-with-ba) – AncientSwordRage Mar 16 '15 at 09:27

7 Answers7

181

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;
}
Patfreeze
  • 680
  • 6
  • 16
TannerHolm
  • 1,983
  • 1
  • 11
  • 10
8

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

That should do it for ya.

Riz
  • 9,703
  • 8
  • 38
  • 54
Phillip Schmidt
  • 8,805
  • 3
  • 43
  • 67
7

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.

fatima_r24
  • 129
  • 1
  • 7
6

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/

Noah Wetjen
  • 1,695
  • 2
  • 17
  • 30
5

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

Michael M.
  • 10,486
  • 9
  • 18
  • 34
Rijo
  • 2,568
  • 1
  • 22
  • 30
4

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

yannh
  • 392
  • 5
  • 14
2

Inline css:

style="filter: blur(3px);"

External css with class:

.div-cls{
    filter: blur(3px);
}

Having major browser support too [ 1 ].

Michael M.
  • 10,486
  • 9
  • 18
  • 34
Abish R
  • 17
  • 3