It's possible to make text looked blurred using just CSS3. See the examples below, just hover over the first bit of text to see the possibility of using blurred text as a hover state.

Some blurred text

Above, you can see some examples of blurred text in browsers that support CSS3

The trick is to change the colour of the element and either apply the text-shadow or box-shadow properties through CSS. Using the :hover pseudo-class you can create a blurred/unblurred effect

Example:

HTML:

<h1 class="blurred">Blurred text</h1>

CSS:

h1.blurred {
	color: #FFF;
}
h1.blurred:hover {
	cursor: pointer;
	color: #666!important;
	text-shadow: 0 0 5px #444;
}

The colours need to be selected carefully, as the shadows are often a bit lighter than the foreground text colour. Shadow size also plays a role. 5px seems to be effective, but 10px can wash the colour out.

To apply the effect to a block element, you'll need to use the box-shadow property instead of the text-shadow property, but otherwise it's the the same.

For more effects, you could apply opacity to make the text a little see through and see how that works out!

If you find this useful, please check out my portfolio site.

« Previous post