Creating a Gaussian Blur Effect With CSS3

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:

p
{
    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 download it straight away from this link.

http://acidmartin.wordpress.com/2010/12/23/creating-a-gaussian-blur-effect-with-css3/