November 20, 2010 in CSS

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:

p { text-shadow: 2px 2px 2px #000; }

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.

text-shadow: 2px 2px 3px #666;

The quick brown fox jumps over the lazy dog.

text-shadow: 2px 2px 0px #999;

The quick brown fox jumps over the lazy dog.

text-shadow: -2px -2px 3px #666;

The quick brown fox jumps over the lazy dog.

Embossed Text

Effect of embossed text is another creative use of text-shadow property.

text-shadow: 0px 1px 1px #666;

The quick brown fox jumps over the lazy dog.

text-shadow: 1px 1px 3px #333, -1px -1px 3px #FFF, 1px 1px #333,
-1px -1px #FFF;

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.

text-shadow: 0 0 8px #000;

The quick brown fox jumps over the lazy dog.

Blurred Text

Blurred text effect is another arrow from quiver of text-shadow property.

text-shadow: 0 0 8px #000;

The quick brown fox jumps over the lazy dog.

Multiple shadows

Using multiple shadows you can create really awesome effects. Following is an example.

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -18px 18px #f20;

The quick brown fox jumps over the lazy dog.

The End

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.

About the author

Alok Jain

Alok designs digital experiences to help businesses achieve their goals. He is passionate about designing the right User Experience for their customers. For over 15 years, he has worked with small startups to mature product teams. Whether it is designing a WordPress product, a frontend experience, WooCommerce, or React.js, he follows the best product development practices for design and code, for desktop or mobile.

2 thoughts on “CSS3 text-shadow property – the hidden powers.

  1. Gintong Aral says:

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

  2. Gintong Aral says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *