Blur effect on a div element

html css blur
bialasikk picture bialasikk · Aug 15, 2012 · Viewed 117.2k times · Source

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

Answer

BenSlight picture BenSlight · Apr 8, 2015

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;

}

Related questions

How can I make a CSS glass/blur effect work for an overlay?

I am having trouble applying a blur effect on a semi-transparent overlay div. I'd like everything behind the div the be blurred, like this: Here is a jsfiddle which doesn't work: http://jsfiddle.net/u2y2091z/ Any ideas how …

Read More
How to blur(css) div without blur child element

.content { float: left; width: 100%; background-image: url('images/zwemmen.png'); height: 501px; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); } .opacity { background-color: rgba(5, 98, 127, 0.9); height: 100%; overflow: hidden; } .info { float: left; margin: 100px 0px 0px 30px; …

Read More
using a div to blur an image behind it?

Is it possible to code a div to enable it to blur whatever image is under it? something like this: Could this be done somehow with -webkit maybe?

Read More