Cross-Browser CSS Filters: Blurring Text

While it is theoretically possible to blur web page text through the use of the new blur CSS filter in conjunction with the methods I’ve demonstrated in the recent CSS Image Blur article, there’s a better, simpler method that is supported in a far greater variety of browsers: an unusual variation of text-shadow.

Before I demonstrate that technique, a heartfelt request: please avoid blurring text on your web page just to “look cool”. Deliberately reducing the legibility of text that should be in focus for your site visitors is, in most cases, a very poor design decision. You can blur text in order to “pull focus” to a modal dialog box (which I will demonstrate in an upcoming article) or to shield the viewer from reading spoilers (the example below, shown in the header for this tutorial). Under some circumstances it is even possible, if somewhat questionable, to blur navigation elements. Your justification for blurring text should always be carefully considered, and in most cases accessibility and legibility should take priority.

That being said, I’ll show the basic technique for blurring text. Let’s assume that we wanted to obfuscate some words on our page that could potentially spoil a movie. I’ll make a span with a class that does so:

1. span.spoiler { text-shadow: 0 0 8px #000; color: rgba(255,255,255,0); }

Then apply the span to our HTML content:

1. <p id=citizen-kane>In Orson Well’s <cite>Citizen Kane</cite>, Charles Foster
2. Kane utters the word “Rosebud” the moment before he dies, precipitating
3. an investigation that explores the character's driven psyche and
4. tempestuous life while never uncovering the central mystery. The truth is
5. only revealed to the audience at the very end of the movie:
6. <span class=spoiler>“Rosebud” is the name of Kane’s most beloved toy
7. from childhood, a wooden sled.</span>

This declaration makes the text within the span transparent, while retaining the text-shadow (which is not displaced horizontally or vertically, creating an equal blur on all sides). This result is that the words become unreadable. You can blur the text to a greater or lesser degree by increasing or decreasing the third value of text-shadow.

Adding Support for IE

To get the same effect in IE, we use Microsoft’s own proprietary blur filter:

1. span.spoiler {
2. text-shadow: 0 0 8px #000; color: rgba(255,255,255,0);
3. filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
4. zoom: 1; }

Adding A Pause For Screen Readers

One remaining issue: if your visitor is using a screen reader, none of these properties will make any difference. A text-to-speech translator will keep reading the page aloud, including the spoiler text. We need to add a pause before the spoiler, so that the user has the option of stopping the recitation. We’ll do so by adding a property from the oft-neglected CSS Speech Module:

1. span.spoiler {
2. text-shadow: 0 0 8px #000; color: rgba(255,255,255,0);
3. filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
4. zoom: 1; pause-before: 3s; }

Making The Blurred Text Readable

It would be pointless to leave your visitor without any means of unblurring the text. The solution is simple:

1. span.spoiler:hover { text-shadow: none; color: #000; filter: none; }

Supporting this in IE6 would require to you add an <a> tag around the text, as that browser doesn’t provide support for :hover on any other element.

If you’re viewing this web page with a recent build of almost any browser, you’ll see that the deblurring of the text is transitioned, the discussion of which I’ll leave for a future article.

This solution should work in all browsers back to IE5.5: if your visitor is viewing your pages in a browser even earlier than that, it could be argued that they deserve any spoilers they get.