Mastering CSS3 Text Shadows

• Develop a Windows 8 app in 30 days

Our journey to the world of shadows continues. If you missed the article, we explored the basics of using the box-shadow property. Today we are going to focus on the text-shadow.

Just to remind you: both properties meanwhile are defined in different modules actually work in a similar way. So if you are already familiar with the box-shadow you will easily understand the basics of the text-shadows art. Before we will jump to the practice lets deep a little bit into the theory to find out what is the difference between both.

Browser Support

The text-shadow rule is supported by many modern browsers including IE10. You can also use it in your metro style apps for Windows 8.

text-shadow vs box-shadow

The first thing you need to know is that both specs (CSS3 Backgrounds and Borders and CSS3 Text) as for now are in the Working Draft status and thus they still may change. I will also discuss it while talking about the spread distance.

If you remember the syntax of the box-shadow it looks like that:

box-shadow: none |
<shadow> [ , <shadow> ]*;
<shadow>
= inset? && [ <length>{2,4} && <color>? ]

The second rule in the full mode can be expanded as:

shadow =
inset? h-offset v-offset blur-radius spread-distance color;

The spec for CSS3 Text describes the text-shadow property in a similar way:

text-shadow: none | [
<length>{2,3} && <color>? ]#

Where:

Values are interpreted as for ‘box-shadow’.

So you may think on the full syntax for a one text-shadow effect as:

shadow =
h-offset v-offset blur-radius color;

There are two differences here: first — you can’t create an inner shadow for the text, and second — there is no spread distance for text-shadow in CSS3 Text. Similar to the box-shadow you can create multiple shadows displayed on top of each other. Now lets have some practice.

text-shadow

Offsets and color

We will start from the very first steps — to define some horizontal and vertical offsets all that you need is to write up two length values (1.1–1.4):

Positive offsets move the shadow to the right and down (1.1):

text-shadow:10px 10px; width:300px;

Negative values define an offset moved to the left and up (1.2):

text-shadow:-5px -5px; width:300px; color:blue;

Next is the color. Let’s first discuss what happens when the color is omitted.

According to current version of the spec:

"If the color is absent, the used color is taken from the ‘color’ property."

If you will look across different browsers you may note that their behavior on that differs. Webkit-based browsers use transparent color in that case — and not because they are bad or they are doing something wrong. The point here is that the previous edition of the css3-backgrounds said:

omitted colors are a UA-chosen color.

I believe it will be fixed in future versions of Chrome, Safari and other webkit-browsers.

Omitting the text-shadow color and thus applying to it the same color as the text has could be useful if you would like to create a blurred text effect (see samples 2.3 and 2.4 below).

To explicitly set the shadow’s color just add the color you want at the end of the rule:

text-shadow:-1px -1px white; color:blue; background:#333; /* 1.3 */
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee; /* 1.4 */

Note that while working with shadows you can use any color format defined in the CSS3 Color module including rgba() and hsla() functions with alpha-channel.

Blurring

The third length parameter is for the blur-radius (2.1–2.4):

In accordance with the definition of the blur-radius for the box-shadow property you should use a nonnegative value (0 - for no blurring). Exact blurring algorithm can differ from one browser to another but in mathematical sense they all should be close enough to the Gaussian blur algorithm.

In the first two samples (2.1 - 2.2) I’m using different blur-radiuses:

text-shadow:5px 5px 3px darkred; color:red; /* 2.1 */
text-shadow:4px -4px 10px red; color:azure;  background:#333; /* 2.2 */

In the second pair (2.3 - 2.4) I’m changing only the text and background color, and both shadows effects are applied using the same CSS-class ‘blurred-shadow’:

.blurred-shadow
{
    text-shadow:0px 0px 4px ; /* the color
is absent*/
}
color:red; /* 2.3 */
color:lightgray; background:#333; /* 2.4 */

Expansion and Contraction

Now it is time to talk some more about web standards. I believe you should know it before you will try to use the spread value in the text-shadow in any of your projects. While working on the CSS3 Text module CSSWG decided to make a change to the previous version of this spec to allow a quicker progress towards the recommendation status. In this previous edition the text-shadow property included one more (fourth) length parameter — spread distance.

Similar to the box-shadow spread-distance for text-shadow allows to expand or contract the shadow.

As for now that definition of the text-shadow was moved to the L4 — and today you can find it in the ED for css4-text. Now I’m going to discuss how to use spread, you can try it in the latest versions of IE10 (as I know at the current moment IE is the only browser to support spread for text-shadows). Spread is a really power tool and allows to create some amazing samples! But it also may change in future. So be careful!

To increase the shadow set the spread-distance to a positive value (3.1):

text-shadow:5px 5px 0px 3px lightgreen; color:green;

To decrease — to a negative one (3.2):

text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;

In case of zero-offet spread-distance can be used to outline the text (3.3):

text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;

And one more important note! Actually today the fourth length in the text-shadow rule is treated by not supporting browsers as a wrong text-shadow definition, and such rules are simply ignored. So if you would like to provide some level of compatibility for them you will need to double your text-shadows rules like that:

text-shadow: 0px 0px 10px lightgreen; /* 3.4 */
text-shadow: 0px 0px 10px 10px lightgreen; /* 3.5 */

Sometimes the shadow’s expansion could be emulated using multiple shadows with offsets in various directions (see samples 4.6 and 4.7 in the next chapter).

Multiple Shadow

Finally and absolutely similar to the box-shadow you can apply multiple shadows to the text (4.1–4.5):

Simple outlining (4.1):

text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta;

Various blurred shadows with various offsets (4.2):

text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35), 
             6px -6px 4px 2px rgba(255,255,255,0.25), 
             -3px -3px 4px 6px rgba(255,0,255,0.15); 

Neon-effect (4.3):

text-shadow: 0 0 0 3px white, 
             0 0 2px 6px magenta,
             0 0 1px 9px white,
             0 0 6px 12px magenta;

And another neon-effect (4.4)

text-shadow: 0 0 2px #fff,
             0 0 4px 2px rgba(255,255,255,0.5),
             0 0 6px 6px #f0f,
             0 0 4px 7px #fff,
             0 0 3px 15px #222,
             -4px 0 2px 9px #f0f,
             4px 0 2px 9px #f0f,
             0 -4px 2px 9px #f0f,
             0 4px 2px 9px #f0f;

Text underlining (4.5):

text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px;
color:magenta;

Emulating Expansion

As I already said technically you can use multiple shadows to create something similar to the real shadow expansion. So to emulate the sample (4.6):

text-shadow: 0px 0px 0px 4px magenta;

You can try to define multiple shadows with different offsets in various directions (4.7):

text-shadow: magenta 0px 2px, 
            
magenta 2px 0px, 
            
magenta -2px 0px, 
            
magenta 0px-2px, 
            
magenta -1.4px -1.4px, 
            
magenta 1.4px 1.4px, 
            
magenta 1.4px -1.4px, 
            
magenta -1.4px 1.4px;

Actually there is some visual difference. Also you should understand that such technic has limited usage: it is less accurate and also negatively affects the performance of the page rendering.

More Samples

Now as you already know all the basics of the text-shadows art, let’s try to build something more complex.

Classic rainbow (5.1):

text-shadow: 0 0 2px 3px yellow,
             0 0 2px 6px orange,
             0 0 2px 9px red,
             0 0 2px 12px lime,
             0 0 2px 15px blue,
             0 0 2px 18px violet;

Double shadow (5.2):

text-shadow: 0 0 2px 2px white,
             2px 0 2px 5px #222,
             3px 0 3px 6px #933,
             5px 0 2px 14px #222,
             6px 0 5px 16px #533;

Flame-shadow (5.3):

text-shadow: 0 0 2px #eee,
             0 0 4px 2px #fff,
             0 -2px 4px 2px #ff3,
             2px -4px 6px 4px #fd3,
             -2px -6px 11px 6px #f80,
             2px -8px 18px 8px #f20;

Traditional "letter-press" effect (5.4):

text-shadow: 0px 2px 3px #555;

Also traditional 3d-text (5.5):

text-shadow: 0 0 1px #999,
             1px 1px 1px #888,
             2px 2px 1px #777,
             3px 3px 1px #666,
             4px 4px 1px #555,
             5px 5px 1px #444;

Double shadow for a vintage-effect (5.6)

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

Transparent text with contracted shadow (this effect also relies on the font size and typeface) - sample (5.7)

text-shadow: 0 0 2px -3px rgba(196,255,0,0.3),
             0 0 6px -5px #9c6;
color:transparent;

Using the text-shadow on the css pseudo-class ::first-letter (5.8)

.text {
    text-shadow:0 0 5px;
}
            
.text::first-letter
{
    color:azure;
    text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
}

Interactive Sample

If you wish to play with shadows in an interactive way my colleagues created a cool demo for the Build conference in the last September: "Hands-on: text-shadow".

Note

CSS properties discussed in this article are defined in the CSS3 Text module which is currently in the Working Draft status. Meanwhile it seems to be quite stable it still can change in details.