Blur effect on div via CSS/javascript?

Question

Forgive me if this sounds like a dumb question/awkward wording - I'm in the process of learning to code.

I'd like to get a frosted glass effect similar to that of icloud.com for the content behind the div element. I've looked all over the web and was unable to find anything that does that.

I'd like to know if this is possible, and if it is, how to do it.

Thanks,

Creating something that is white and set the opacity – adeneo Jan 19 '14 at 16:11 — adeneo, Jan 19 '14 at 16:11
https://github.com/GianlucaGuarini/vague.js – sinisake Jan 19 '14 at 16:14 — sinisake, Jan 19 '14 at 16:14

score 4 · Answer 1 · answered Jan 19 '14 at 16:24

icloud.com directly uses blurred images for those icons but if u want to create something to be blurred when the page is rendered, you can use css3 filter blur for that purpose.

All you need is a image of what you need to blur and apply these lines on which image you want to blur.

 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);

You can change the values of course.And if you want to blur other elements than images, let me know in the comments. There is a jquery plugin for that.

mogosselin · Answer 2 · 2014-01-19T16:18:57.537

I didn't use this product but it seems a little like what you want to acheive : http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Another solution :

Depending on what is "blurry" on your page, if it never changes, you could also just make an blurry image of that in Photoshop and load it on your DIV when you need too.

Edit #2 :

The blur Element :

Example : http://davidwalsh.name/css-filters

.backgroundblur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Check out this page to know on what browser it will work : http://caniuse.com/css-filters

It doesn't seems to work on IE.

Damn it! When are Firefox and IE gonna catch up? This works BEAUTIFULLY in chrome and mobile, doesn't work for shit nearly anywhere else! Still, thanks though! So easy and simple, filter: blur(5px); Bam! — Hank, Mar 25 '14 at 20:38

Zword · Accepted Answer · 2014-01-20T05:20:11.897

Using pure CSS

1. For rectangular images

Demo 1

2. For round corner images

Demo 2

Using HTML5

3. On Inspecting Elements of the site icloud.com i came to know that the blurred images are generated in an HTML5 Canvas tag .Therefore i googled it and found the following tutorial.Below is the code from that tutorial:

var grayscale = Filters.filterImage(Filter.grayscale, image);
// Note that ImageData values are clamped between 0 and 255, so we need
// to use a Float32Array for the gradient values because they
// range between -255 and 255.
var vertical = Filters.convoluteFloat32(grayscale,
  [ -1, 0, 1,
    -2, 0, 2,
    -1, 0, 1 ]);
var horizontal = Filters.convoluteFloat32(grayscale,
  [ -1, -2, -1,
     0,  0,  0,
     1,  2,  1 ]);
var final_image = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<final_image.data.length; i+=4) {
  // make the vertical gradient red
  var v = Math.abs(vertical.data[i]);
  final_image.data[i] = v;
  // make the horizontal gradient green
  var h = Math.abs(horizontal.data[i]);
  final_image.data[i+1] = h;
  // and mix in some blue for aesthetics
  final_image.data[i+2] = (v+h)/4;
  final_image.data[i+3] = 255; // opaque alpha
}

Code from HTML5rocks.Also visit to know more

score 0 · Answer 4 · edited May 23 '17 at 10:30

What you want to do is create a transparent .gif or .png file and then set it as a background-image on any div you want to give that frosted effect to. That way it overlays the div, and shows the frosted effect over it, and anything in the div will show through the transparent part of the png.

This is a similar example which should help: How to give outer glow to an object in a transparent png using CSS3?

(Also, saying you want a blur effect confuses many people, since blur means when you lose focus of an object. So, maybe you should call it frosted effect, instead of blur.)

I made this 30% transparent layer .png image that should do a frost effect on any div you apply it to: enter image description here

And you can see an example here: http://jsfiddle.net/n26Vf/

This would be the method for any type of effect, glossy, frosted or blurry. — Control Freak, Jan 19 '14 at 16:18

score 0 · Answer 5 · edited May 23 '17 at 11:55

Real CSS blurring is so far only supported in Webkit, and still quite buggy, so not really an option. Having said that, it wouldn't quite help you anyway since it can only blur an element itself - not other elements behind it. To emulate this effect, you'd effectively have to stack and layer 2 separate images of the same background, one crisp and one blurred, and manually determine which one to show where.

You probably also want to read this topic, and this page is an awesome read if you have time to spare. But its management summary is telling:

It's fun to see that this is possible today in WebKit/Blink. But (there is always is a but) this technique is not ready for production. Though it's working quite well on the desktop it's not working on iOS7 at the moment, it's slow and scrolling is not working at all.

Blur effect on div via CSS/javascript?

5 Answers5

Using pure CSS

Demo 1

Demo 2

Using HTML5