Blur effect on a div element
HtmlCssBlurHtml Problem Overview
Is it possible to add a gaussian blur on div
element? If yes, how I can do this?
Html Solutions
Solution 1 - Html
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 - Html
Try using this library: https://github.com/jakiestfu/Blur.js-II
That should do it for ya.
Solution 3 - Html
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 - Html
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 - Html
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 - Html
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.