8

I am wondering if there is some way to apply a gaussian blur onto a div using jQuery (or CSS that jQuery can modify). I have looked into blur(), but at least with Safari, it doesn't seem that it accomplishes what I'm looking for. If possible, I want to use fadeIn on the effect, so it blurs gradually.

Thanks for any help!

individualtermite
  • 3,615
  • 16
  • 49
  • 78

4 Answers4

10

Be aware that Blur is when a DOM-element, such as textboxes (inputs etc.) loses focus, and should not be mixed with the kind of blur you are talking about (gaussian/motion blur).

There is no good cross-browser solution for this problem. You can, however, blur images by using a API such as the one Ben suggests. Or by using this one.

Maybe if you find out a way to draw your div contents to a HTML5 canvas you can then apply the Blur-filter by using Pixastic?

jason
  • 8,918
  • 2
  • 37
  • 43
Mickel
  • 6,658
  • 5
  • 42
  • 59
  • To date I'm not aware of any good cross-browser solution for drawing DOM contents to a HTML5 canvas. There are a few techniques that work to a limited degree. – Xaxis Mar 25 '13 at 20:20
5

Check out the blur.js plugin for jQuery: http://blurjs.com, it uses my Stack Blur algorithm which I believe is currently the fastest JavaScript based way to blur canvas elements: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Quasimondo
  • 2,485
  • 1
  • 22
  • 30
4
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

content of blur.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

More : http://demosthenes.info/blog/534/Crossbrowser-Image-Blur

Armel Larcier
  • 15,747
  • 7
  • 68
  • 89
  • 2
    Please don't paste the same answer into multiple questions. if the questions are duplicates, please flag them as such. If they are not, then please tailor your answer to the question asked. – George Stocker Oct 03 '12 at 13:04
0

It has not been mentioned here that we can create an excellent realistic blur effect for text using CSS3 text-shadow. And, (yep, of course!) we can blur solid backgrounds and borders using box-shadow (inset shadows and multiple shadows are allowed, you know).

So I hope in most cases you can achieve a realistic blur effect combining:

1) image blur using canvas

2) text blur using text-shadow

3) solid background and borders blur using box-shadow

4) have I forgotten anything else?....

PS: I believe it's not possible to write a magic class that blurs any html.

The restrictions that can't be overcome: blur the border of the image, blur embedded media

Dan
  • 55,715
  • 40
  • 116
  • 154
  • I looks like it's possible to blur a screenshot of the site http://html2canvas.hertzen.com/ – Dan Oct 23 '11 at 20:45