Creating Gaussian Blur Effect With CSS3

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

There is a new and improved version of the solution on this page.

Unfortunately, CSS3 does not provide means for creating blur effects out of the box, however we can easily emulate Gaussian Blur by using text-shadow and setting the color of the element to transparent:

The following markup:

[html]
<p>Lorem ipsum dolor sit amet…</p>
[/html]

…And this CSS:

[css]
p
{
text-shadow: 0 0 8px #000;
color: transparent;
/* other properties */
}
[/css]

… Will produce this:

… And we can use it to add cool a lá Vista and Windows 7 blur effects to our Web 2.0 dialog boxes as you shown below:

A few notes:

You can control the smoothing of the blur via the spread value of the text-shadow property (in our example it is set to 8 pixels).

Internet Explorer 5.5-8 does not have native support for RGBA colors, but you can use the properietary gradient filter to emulate RGBA:

[css]filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";[/css]

On the other hand, in IE you do not have to emulate Gaussian blur, because it supports it since version 5.5 – again via the proprietary blur filter:

[css]filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";[/css]

The demo does not work properly with Opera, because that browser does not seem to support RGBA colors applied to elements that have a position different than static, however with a different setup it can be put to work. IE6 and IE7 fail to execute the blur filter, because it is applied to a relatively positioned element (yes, that’s the weird CSS hack for stopping the propagation of transparency from parent to child elements), but again – this can be solved with a different setup, markup and CSS.

The entire example is available on this page, or you can find more experiments here.

Merry Christmas and a Happy New Year everyone!

Related Posts

Creating Gaussian Blur Effect With CSS3

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Categories and Tags

Links