I've e accross a library/plugin called StackBlur which seems like the most well known or widely used tool to achieve gaussian blurs in the browser.

However from the looks of it it only works on blurring images. I'm looking at blurring a div only, so that when the div is over laid on an image, the background of the div will be that section of the image blurred.. if that makes sense.

So the question is, is this possible, and if so, what's the most widely used and browser friendly way and/or tool?

EDIT

I've created a CodePen and when you look at it there's a few issues, firstly the background behind the div isn't actually blurred. And secondly, the edges of the div are blurred when they should be more solid looking.

//

I've e accross a library/plugin called StackBlur which seems like the most well known or widely used tool to achieve gaussian blurs in the browser.

However from the looks of it it only works on blurring images. I'm looking at blurring a div only, so that when the div is over laid on an image, the background of the div will be that section of the image blurred.. if that makes sense.

So the question is, is this possible, and if so, what's the most widely used and browser friendly way and/or tool?

EDIT

I've created a CodePen and when you look at it there's a few issues, firstly the background behind the div isn't actually blurred. And secondly, the edges of the div are blurred when they should be more solid looking.

//

• javascript
• jquery
• css
• blur
• gaussian

3 Answers 3

I would remend the use of SVG-filters:

.filtered {
  -webkit-filter: url(#f1);
  filter: url(#f1);
}

<svg xmlns="http://www.w3/2000/svg" version="1.1" height="0">
  <defs>
    <filter id="f1">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>
</svg>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="filtered">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

This is a bit of an old question, but I came across it after looking for an answer to the same question. The backdrop-filter property now has fairly widespread browser support, and it achieves what I think the OP was after. So adding a class like

.background-blur {
    backdrop-filter: blur(5px);
}

should do the trick. Read more about the property in the MDN docs.

Take a look at CSS3 filters: CSS3 filter Property

With it you can blur anything by applying a blur class to them:

<style>
.blurThreePX {
    -webkit-filter: blur(3px); /* Chrome, Safari, Opera */
    filter: blur(3px);
}
</style>
<div class="blurThreePX">Hello world</div>

EDIT 1

This fiddle shows how to overlap a background image with a blur effect:

jsFiddle

Note that this does require a special HTML hierarchy and some JavaScript.