CODEWITHSUNDEEP
htmlcss
Utkarsh Sinha
Utkarsh Sinha

Reputation: 3305

Bluring a div with CSS

Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.

I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)

If not possible, what would be some good workaround techniques?

Upvotes: 1

Views: 5691

Answers (2)

tomsseisums
tomsseisums

Reputation: 13357

Well... I came up with this:

.blur {
    color: transparent;
    text-shadow: 0px 0px 2px #000000;
}

This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!

Have fun with experiments!

Upvotes: 1

Chris Morgan
Chris Morgan

Reputation: 90742

It is possible with an SVG filter.

The basics of it is that it's just a simple feGaussianBlur.

Here it is: http://jsfiddle.net/aXUtU/1/

This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).

There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.

Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.

Upvotes: 3

Related Questions