HSR Technologies is a Top Rated agency on Upwork.com, Please check our Upwork profile for more details.

CSS3 text-shadow property – the hidden powers.

Text-Shadow is one of the many new properties from the quiver called CSS 3. It’s too powerful to create effects, which were only possible through image editing software’s like Adobe Photoshop.

This little beast is a very handy tool to add effects like drop-shadow, multiple shadows, glow, blur, and emboss etc. You can also blend a little piece of JavaScript to animate these effects. Let’s learn how?

The text-shadow saga

Text-shadow property was originally introduced in CSS 2, but was not implemented by most of the browsers for long time. (I will cover the browser support later in this article.) Due to lack of browser implementation this property was removed from CSS 2.1. This property is reintroduced in CSS 3 Text module.

Understanding the text-shadow property

Syntax of text-shadow property is like this:
[code lang=”css”]
p {<strong> </strong>text-shadow: 2px 2px 2px #000;}
[/code]
This rule specifies a text shadow effect that’s black, extends 2px to the right and 2px below the text, and has a 2px blur radius.

CSS text-shadow property has four arguments:

  • Color of the shadow: A color value may optionally be specified before or after the length values of the shadow effect. This color value must be used as the color of the shadow effect. If the color is not specified, a user agent chosen color will be used.
  • Horizontal offset: The horizontal offset value indicates an offset from direct alignment with the text. The length value specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text.
  • Vertical offset: Similar to the horizontal offset value, the second length value specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.
  • Blur Radius: is an optional value which can be specified after the shadow offset. If the blur radius is not specified, it is equal to zero. The blur radius is a length value that indicates the boundaries of the blur effect. If it is zero, the shadow is sharp; otherwise the larger the value, the more the shadow is blurred. Negative values are not allowed.

Examples

Simple Shadow

Following examples demonstrates the simple drop shadow effect, with no blur radius in second example, and negative horizontal and vertical offsets in third example to change the direction of shadow.
[code lang=”css”]
text-shadow: 2px 2px 3px #666;
[/code]

The quick brown fox jumps over the lazy dog.

[code lang=”css”]
text-shadow: 2px 2px 0px #999;
[/code]

The quick brown fox jumps over the lazy dog.

[code lang=”css”]
text-shadow: -2px -2px 3px #666;
[/code]

The quick brown fox jumps over the lazy dog.

Embossed Text

Effect of embossed text is another creative use of text-shadow property.
[code lang=”css”]
text-shadow: 0px 1px 1px #666;
[/code]

The quick brown fox jumps over the lazy dog.

[code lang=”css”]
text-shadow: 1px 1px 3px #333, -1px -1px 3px #FFF, 1px 1px #333,
-1px -1px #FFF;
[/code]

The quick brown fox jumps over the lazy dog.

Glowing Text

It’s easy to create a glow effect by just using the blur radius and keeping the horizontal and vertical offset values to 0.
[code lang=”css”]
text-shadow: 0 0 8px #000;
[/code]

The quick brown fox jumps over the lazy dog.

Blurred Text

Blurred text effect is another arrow from quiver of text-shadow property.
[code lang=”css”]
text-shadow: 0 0 8px #000;
[/code]

The quick brown fox jumps over the lazy dog.

Multiple shadows

Using multiple shadows you can create really awesome effects. Following is an example.
[code lang=”css”]
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -18px 18px #f20;
[/code]

The quick brown fox jumps over the lazy dog.

Browser Support

ie 5.5 6.0 7.0 8.0
firefox 1.0 1.5 2.0 3.0 3.5
opera 9.2 9.5 10.0 10.5
safari 1.3 2.0 3.1 4.0
chrome 2.0
Full Support
Partial Support (Buggy)
No Support
  • Multiple Shadows were not supported by most of the browsers shown above as buggy.
  • Opera 9.5 supported at most six shadows. Later, this limitation was dropped. Opera painted the shadows in the wrong order, this was fixed in Opera 10.5.
  • In Internet Explorer text-shadow is supported with help of special filter “DXImageTransform.Microsoft.Shadow“. text-shadow property is not supported in CSS upto IE8.

The End

I will cover how to animate text-shadow with help of JavaScript in another post. Please share your thoughts and examples for utilizing the text-shadow property in more creative ways. Also don’t forget to share the post on facebook, twitter etc.

  • very nice tutorial, i like the output of the multiple shadows. thanks

  • i think their is a typo in glowing and blur text?