Creating Gaussian Blur Effect With CSS3

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:

<p>Lorem ipsum dolor sit amet...</p>

…And this CSS:

    text-shadow: 0 0 8px #000;
    color: transparent;
    /* other properties */


… 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:

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

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:

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

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



  1. Thank you so much!! I have a semitransparent modal sheet that slides down over my content, and I was just about to make it opaque (due to text behind it interfering), but this makes a great illusion of blur!

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s