How to Generate Blurry Text

Try blurry text when you feel like experimenting with new Web designs.

While some might consider blurry text a nuisance, savvy Web designers may see it as an asset. All major all major browsers except Internet Explorer support CSS 3 text-shadow attribute. By assigning this attribute to text and making the text transparent, creative designers can intentionally generate a variety of interesting blurry text effects. They might use text shadows on headings, logos and even menus. Test this effect by adding a simple CSS class to one of your Web pages.

Instructions

1. Launch any HTML editor or word processor, and open an HTML document.

2. Add the following code to the document's body section:

   <h1 class="blurText">This is a Blurry Heading</h1>

   This creates a heading that references a CSS class named "blurText."

3. Add the following CSS code to the document's head section:

   <style type="text/css">

   .blurText {

   text-shadow: 0px 0px 4px Red;

   color: transparent;

   }

   </style>

   This is the blurText class. The text-shadow attribute adds a shadow around text. The third parameter, "4px," sets the blur radius. Higher values increase the blurriness and lower values decrease it. Set that value to anything you like. For instance, to create a slight blur effect, change the value to "1px." The last parameter, "Red," sets the shadow's color. The color attribute, shown on the last line of the class, sets the text color to transparent. This causes browsers to display nothing but the blurry shadow around the text.

4. Save your document and view it in any browser except Internet Explorer. You will see red blurry text.

Tips & Warnings

• Change the color from red to any color you desire. Internet Explorer users will see ordinary text in their browsers when you use this blurry text effect.

References

• W3Schools: CSS3 Text Effects

Resources

• Smashing Magazine: CSS 3 Cheat Sheet (PDF