89

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

3

7 Answers 7

186

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;
}
1
12

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.

8

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

That should do it for ya.

1
  • 7
    It has bugs with chrome + it slow page load. Commented Nov 10, 2014 at 4:28
7

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/

6

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

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

4

Inline css:

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

External css with class:

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

Having major browser support too [ 1 ].

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.