Is it possible to add a gaussian blur on div
element? If yes, how I can do this?
-
1What have you found so far? Have you googled this issue?– Erty SeidohlCommented Aug 15, 2012 at 20:54
-
possible duplicate of HTML5 Gaussian blur effect– Chris LaplanteCommented Aug 15, 2012 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?– AncientSwordRageCommented Mar 16, 2015 at 9:27
7 Answers
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;
}
you can do quite a few things :
filter: blur(10px)
backdrop-filter: blur(10px)
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.
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/
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
Inline css:
style="filter: blur(3px);"
External css with class:
.div-cls{
filter: blur(3px);
}
Having major browser support too [ 1 ].