How to Create a CSS3 Blurred Text Link Effect

Key Takeaways

Blurred text effects can be created in CSS3 by using a transparent text color and a text shadow, but not all browsers support the text-shadow property. In such cases, using Modernizr or creating a custom text-shadow detection code can be a workaround.
A pleasing effect for navigation menus can be achieved by making links smoothly blur in or out on hover or focus. This involves defining a “blur” class which can be applied to any link, and then using CSS styles that can be applied in all browsers.
While creating blurred text effects, it’s important to be mindful of accessibility and visibility issues. Also, the amount of blur can be controlled by adjusting the third text-shadow property, which defines the amount of blur. It can be modified to increase or decrease the blurring effect.

Here’s a great text effect I first saw demonstrated on Chris Coyier’s CSS Tricks website. Blurred text can be created in CSS3 by applying a transparent text color and a text shadow:


.blur-text
{
	color: transparent;
	text-shadow: 0 0 5px #000;
}

Unfortunately, not all browsers support text-shadow. IE9 and below apply the transparent color but no shadow effect — the text becomes invisible. We must either resort to Modernizr or roll our own text-shadow detection code.

When the browser supports it, the following JavaScript code will append a “textshadow” class to the HTML element. We can therefore use a CSS selector of “.textshadow .blur-text” to ensure it’s only applied when the effect won’t cause undesirable behavior:


if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}

warning: Opera’s blurry behavior

Chrome and Firefox show blurred text and it’s disabled in IE. However, Opera can be quirky; it supports text-shadow but doesn’t like applying it to transparent text. This appears to be a bug since applying a color of rgba(0,0,0,0) solves the problem.

Blurred Links

With a little additional CSS3 magic we can make links smoothly blur in or out on hover or focus. It could be a pleasing effect for a navigation menu.

We’ll define a “blur” class (or “blur in” classes) which can be applied to any link. The link will start blurred and return to normal focus on when it’s active. Similarly, we’ll define “blur out” classes which blurs the text on hover/focus, i.e.


<a href="#" class="blur in">starts blurred, ends un-blurred</a>
<a href="#" class="blur out">starts un-blurred, ends blurred</a>

We now require basic CSS styles which are applied in all browsers — even those without text-shadow support:


a.blur
{
	text-decoration: none;
	color: #339;
}

a.blur:hover, a.blur:focus
{
	text-decoration: underline;
	color: #933;
}

The next set of styles is applied to all .blur elements whether they have focus or not:

we remove the link underline and outline
set the text color to transparent, and
apply a CSS3 transition which smoothly animates between no and full text-shadow. The effect starts after 100ms and completes 400ms after that.


.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
	text-decoration: none;
	color: rgba(0,0,0,0);
	outline: 0 none;
	-webkit-transition: 400ms ease 100ms;
	-moz-transition: 400ms ease 100ms;
	transition: 400ms ease 100ms;
}

Finally, we define our two text-shadow states. The third text-shadow property defines the ‘amount’ of blur. It’ll animate between 0 and 4px but this can be modified if you want more or less blurring:


/* no blur */
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
	text-shadow: 0 0 0 #339;
}

/* full blur */
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
	text-shadow: 0 0 4px #339;
}

View the link blur demonstration page — the source contains all required CSS and JavaScript.

I hope you find it useful, but be wary of accessibility/visibility issues when using this effect. I’d be grateful for your comments and please post a URL if you use it elsewhere.

Frequently Asked Questions (FAQs) about CSS3 Blurred Text Effect

How can I create a blurred text effect using CSS3?

Creating a blurred text effect using CSS3 involves the use of the ‘text-shadow’ property. This property allows you to apply a shadow effect to the text, and by manipulating the color and blur radius, you can achieve a blurred text effect. Here’s a simple example:

h1 {
text-shadow: 0 0 5px #000;
color: transparent;
}
In this example, the ‘text-shadow’ property is applied to the h1 element. The first two values (0 0) define the shadow offset, the third value (5px) defines the blur radius, and the last value (#000) defines the shadow color. The ‘color’ property is set to transparent to hide the original text, leaving only the blurred shadow visible.

Can I apply multiple shadows to create a more intense blur effect?

Yes, you can apply multiple shadows to a text element to create a more intense blur effect. This is done by specifying multiple sets of values for the ‘text-shadow’ property, separated by commas. Here’s an example:

h1 {
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
color: transparent;
}
In this example, three shadows with different blur radii are applied to the h1 element, creating a more intense blur effect.

How can I create a colored blur effect?

You can create a colored blur effect by specifying a color value for the ‘text-shadow’ property. The color of the shadow will be the color of the blur effect. Here’s an example:

h1 {
text-shadow: 0 0 5px #ff0000;
color: transparent;
}
In this example, a red blur effect is created by applying a red shadow (#ff0000) to the h1 element.

Can I use the ‘filter’ property to create a blur effect?

Yes, you can use the ‘filter’ property to create a blur effect. The ‘filter’ property provides several functions, one of which is ‘blur()’. This function applies a Gaussian blur to the element. Here’s an example:

h1 {
filter: blur(5px);
}
In this example, a blur effect is applied to the h1 element using the ‘blur()’ function. The value inside the parentheses (5px) defines the blur radius.

Can I apply a blur effect to an element other than text?

Yes, you can apply a blur effect to any HTML element, not just text. This includes images, backgrounds, borders, and more. The ‘text-shadow’ property can be used to apply a blur effect to text, while the ‘filter’ property can be used to apply a blur effect to other elements.

How can I create a blur effect that fades in and out?

You can create a blur effect that fades in and out by combining the ‘filter’ property with CSS animations. This involves defining keyframes for the animation and applying it to the element. Here’s an example:

@keyframes blur-in-out {
0%, 100% {
filter: blur(0);
}
50% {
filter: blur(5px);
}
}

h1 {
animation: blur-in-out 3s infinite;
}
In this example, an animation named ‘blur-in-out’ is defined. The animation starts and ends with no blur (blur(0)), and reaches maximum blur (blur(5px)) at the halfway point. The animation is then applied to the h1 element, with a duration of 3 seconds and an infinite number of iterations.

Can I control the intensity of the blur effect?

Yes, you can control the intensity of the blur effect by adjusting the blur radius. The blur radius is the third value specified for the ‘text-shadow’ property, or the value inside the parentheses for the ‘blur()’ function. A larger blur radius results in a more intense blur effect.

Can I create a blur effect with CSS3 that is compatible with all browsers?

While CSS3 provides several ways to create a blur effect, not all of them are compatible with all browsers. The ‘text-shadow’ property is widely supported and should work in most modern browsers. However, the ‘filter’ property and its ‘blur()’ function are not supported in Internet Explorer.

How can I create a blur effect that only affects a portion of the text?

Creating a blur effect that only affects a portion of the text can be a bit tricky, as CSS does not provide a straightforward way to do this. However, it can be achieved by splitting the text into separate elements and applying the blur effect to only one of them.

Can I use a blur effect to create a frosted glass effect?

Yes, you can use a blur effect to create a frosted glass effect. This involves applying a blur effect to a background image and overlaying it with a semi-transparent element. The ‘filter’ property and its ‘blur()’ function are commonly used for this purpose.