Using blur within the browser was long not possible and in a way it still isn't, but using the technique below we can fake it to some amount. Try to click and play with the examples below, all the elements are interactive. There are no images involved whatsoever.

We wish you a merry Christmas, We wish you a merry Christmas, We wish you a merry Christmas, And a happy New Year!

Rudolph the red nose reindeer, had a very shiney nose, and if you ever saw it, you would even say it glowed. All of the other reindeer, used to laugh and call him names. They never let poor Rudolph, join in any reindeer games.

Oh, jingle bells, jingle bells Jingle all the way Oh, what fun it is to ride In a one horse open sleigh Jingle bells, jingle bells Jingle all the way Oh, what fun it is to ride In a one horse open sleigh

How does it work?

Because we can't define something like a blur-radius to just an element, we have to fake it. Blurring text is easy, boxes are a bit harder but also not too complicated.

Blurring text

We blur the text by giving it a text-shadow that doesn't have an offset and has the color of our text. By adding a blur radius to the shadow we have created text with a blurry fade-out effect. The only thing that's left to do is hide the original text by giving it color: transparent . Have a look at today's css file to see how to implement it.

Blurring elements

First the good news: it's not hard, the bad news however is that it only applies to the box border. This means you cannot blur the background image for instance. We use the box-shadow property to fake the blur by adding multiple shadows with varying amounts of blur in the same color as the element's background-color .

Show us the source!

Feel free to look around the different source files we used for this example.