In Orson Well's Citizen Kane, Charles Foster Kane utters the word "Rosebud" the moment before he dies, preciptating an investigation that explores the character's driven psyche and tempestuous life while never answering the central mystery. The truth is revealed to the audience at the very end of the movie: "Rosebud" is the name of Kane's most beloved toy from childhood, a wooden sled.

Part of the CSS Filters Reading List

While it is theoretically possible to blur web page text through the use of the new blur 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: 

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

Then apply the <span> to our HTML content: 

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

span.spoiler { 
	text-shadow: 0 0 8px #000;
	color: rgba(255,255,255,0); 
	filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
	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: 

span.spoiler {
	text-shadow: 0 0 8px #000;
	color: rgba(255,255,255,0);
	filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
	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: 

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

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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/MwPGRp