Create great looking, pure CSS text shadows

MASSMEDIUMS02 November 2015

Typography should be a part of everyone’s favorite design aspect in web design. It's defiantly one of ours. One particular fun and creative tool that CSS allows you to play with is your text-shadow, which seems easy at first but can be used to create some stunning typography effects.

This article will showcase several examples of great looking and useful CSS text-shadow styles.

Basic Syntax for CSS Text-Shadow

The text-shadow property is easy to work with and it works perfectly across all modern browsers. The basic syntax for creating a text-shadow is depicted below. Remember, you have four attributes to work with, the first two set position, the third sets the amount of blur and the fourth the shadow's color.

text-shadow: horizontal-offset vertical-offset blur color;

Basic Text Shadow

Below is an example that has been moved down 2 pixels and right 3 pixels with a 5 pixel blur and a color of black at 50% opacity.

text-shadow: 2px 3px 5px rgba(0,0,0,0.5);

Why RGBA? You don’t have to use RGBA as the color of your shadow, but we recommend it. For more information please visit: www.css3.info/preview/rgba/

Hard Text Shadow

In this example you do not have to blur your shadow at all. Due to their passé nature, hard text shadows are actually very popular at the moment.

text-shadow: 5px 5px 0px rgba(0,0,0,0.2);

Double Text Shadow

Here is when some real fun begins with typography. This is because you realize that you aren’t restricted to a single shadow. By simply using a comma to separate the declarations, you can apply as many shadows as you wish. See syntax below:

text-shadow: shadow1, shadow2, shadow3;

When using this, here is another example with a text treatment that you’ll see everywhere on web right now. The idea allows you to apply two shadows, the first of which is the same color as your background.

text-shadow: 2px 2px 0px #1E9EE6, 4px 4px 0px rgba(0,0,0,0.25);

Distant Text Shadow

When you begin to layer multiple shadows, the results instantaneously will become more and more striking. Here you really begin to create some attractive 3-Demential effects that your page visitor won’t believe is live text. Below, 4 shadow layers with varying degrees of distance and blur.

text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 24px 2px rgba(0,0,0,0.1),
             0px 24px 30px rgba(0,0,0,0.1);

Heavy Text Shadow

Here is another example of almost the exact same idea, however, this time with three shadows that have been kept much closer to the source. The effect allows your text seem a bit richer.

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);

Glowing Text Shadow

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

70's Style Text Shadow

text-shadow: -10px 10px 0px #00e6e6,
                 -20px 20px 0px #01cccc,
                 -30px 30px 0px #00bdbd;

Multiple Light Sources

text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
                 10px 20px 5px rgba(0,0,0,0.05),
                 -10px 20px 5px rgba(0,0,0,0.05);

Letterpress Text Shadow

A great thing about text-shadows is that you can do more with them than a simple drop shadow. For example, this is a quick trick for creating the illusion of inset text. First, set your text color to a slightly darker shade than your background color. Then apply a slight white text-shadow with reduced opacity.

body {
    background: #115780;
}
 
.letterpress {
    color: rgba(0,0,0,0.4);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Soft Emboss Text Shadow

color: rgba(0,0,0,0.6);
text-shadow: 2px 4px 4px rgba(0,0,0,0.2),
                 0px -5px 10px rgba(255,255,255,0.15);

In Conclusion Like most CSS effects, text-shadows are extremely simple. By using commas as a separator, you can stack shadows on top of each other to uniquely add to the interest and realism of the text effect.