Text Shadows
Created: Last updated:
Basic functions
Warning: If you use Internet Explorer (up to and with IE8) this will not work because it is not supported!
The basic function for text-shadow is very simple and adds a shadow to your text as expected, i.e. the letters of your selected font. No surprise here really. You provide three values for the shape of the shadow and a fourth value for the color. The examples below are separated to demonstrate the three values for the shape.
First is the h-shadow value, horizontal position of the shadow
text-shadow: 5px 0px 0px #f00; Horizontal Shadow
The same but with a minus value, moving the shadow to the left
text-shadow: -5px 0px 0px #f00; Horizontal Shadow
Second is the v-shadow value, vertical position of the shadow
text-shadow: 0px 5px 0px #f00; Vertical Shadow
The same but with a minus value, moving the shadow above the text
text-shadow: 0px -5px 0px #f00; Vertical Shadow
Third is the blur value, without a blur the text is basically just duplicated in the background as you can see in the examples above
text-shadow: 0px 0px 5px #f00; Blur Shadow
Fourth is the color value and the example has all values combined
text-shadow: 1px 1px 2px #a55; Text with shadow
text-shadow: -1px -1px 2px #a55; Text with shadow
As you can see in the fourth example you will get a different results with negative values for the offsets. Depending on the font, letter and font-size you may increase the values but in many cases it will require some fine tuning to find the best effect.
Extending the effects
Now, if you just stick to this basic function of the text-shadow you are missing out. The fun part begins because you can add more than just one statement to the property and they will complement each other. You can add some stunning effects to your letters and fonts.
3D Effect
We can create a 3D effect very easily with offset on a couple hard shadows. Notice also the change in the color from dark to light.
Stack three hard shadows
text-shadow: 1px 1px 0px #aaa, 2px 2px 0px #bbb, 3px 3px 0px #ccc;
Cool 3D Effect
Consider adding some space to shadows but especially with 3D effects.
letter-spacing: 1px;
text-shadow: 1px 1px 0px #aaa, 2px 2px 0px #bbb, 3px 3px 0px #ccc;
Cool 3D Effects
Especially for large letters you will want a smoother transition. Simply stack the shadows with a soft blur instead of adding more shadows.
letter-spacing: 1px;
text-shadow: 2px 2px 0px #aaa, 4px 4px 0px #bbb, 5px 5px 0px #ccc;
Hard 3D Effect
letter-spacing: 1px;
text-shadow: 2px 2px 1px #aaa, 4px 4px 1px #bbb, 5px 5px 1px #ccc;
Soft 3D Effect
Glow Effect
Do you like to add some glow to the letters? Simple, stack different sizes and colors, it makes a letter and text glow. We don't need any offsets just a narrow blur with a contrasting color. This will add the glow around the letter. Next, depending on your background you will have to add a second wider blur behind the glow in yet another contrasting color. This will finally make the glow stand out. Note that the order in which you apply the settings is crucial.
letter-spacing: 1px;
text-shadow: text-shadow: 0px 0px 1px yellow, 0px 0px 4px #444;
Let it glow
Neon Effect
How about some neon effect. Keep playing with the glow effect. First we have to make the font's color brighter. Then we add some hard shadows around all four sides with a similar, although, darker color. Finally a larger blur around everything with a similar and bright color and you will have your nice neon effect. Neon effects require some space; don't forget to add some.
letter-spacing: 5px;
color: #fdd;
text-shadow: 1px 1px 0px #f00, -1px -1px 0px #f00, 1px 1px 8px #eaa;
Some Neon Effect
Emboss Effect
By now you should get the hang of it and your imagination going. By adding some contrasting shadows around all four sides and a soft blur you will get a nice emboss effect.
letter-spacing: 5px;
background-color: #aab;
color: #677;
text-shadow: 1px 1px 1px #eef,-1px 0px 1px #001, 0px -1px 1px #001, -1px -1px 1px #001;
Emboss This
Deboss Effect
Of course, we can make the opposite effect of emboss; simply swap the colors and we have a relief or deboss effect.
letter-spacing: 5px;
background-color: #aab;
color: #677;
text-shadow: 1px 1px 1px #eef,-1px 0px 1px #001, 0px -1px 1px #001, -1px -1px 1px #001;
Deboss That
Number of Shadows
Looking at the emboss effect note that there are subtle but sometimes noticeable differences, especially when you work with larger letters. Pay attention to the little changes in the number of shadow statements. Especially around the four axis and with that the corners. In the example to the right, a simple -3px -3px offset alone does not produce smooth transitions around the corners, you will have to add -3px 0px and 0px -3px as well for a smooth transition to the bottom left and to the top right.
letter-spacing: 5px; background-color: #aab; color: #677; font-size: 4em;
CSS for 1. Order:
text-shadow: -3px -3px 4px #001, -3px 0px 4px #001, 0px -3px 4px #001, 3px 3px 4px #eef;
CSS for 2. Order:
text-shadow: 3px 3px 4px #eef, -3px -3px 4px #001;
SE vs. SE
Order of Shadows
Another thing you will have to take care of is the order of the statements; the statements are cascading. Again, the differences are subtle but sometimes noticeable and mostly around the corners.
letter-spacing: 5px; background-color: #aab; color: #677; font-size: 4em;
CSS for 1. Order:
text-shadow: -3px 0px 4px #001, 0px -3px 4px #001, -3px -3px 4px #001, 3px 3px 4px #eef;
CSS for 2. Order:
text-shadow: 3px 3px 4px #eef, -3px 0px 4px #001, 0px -3px 4px #001, -3px -3px 4px #001;
SE vs. SE
Other Effects
From here on you can really go over board and make all kinds of effects. Stack shadows like crazy, work with colors and the axis. Just make sure you use them on rather large letters and give some room to breath.
There is a different result with every colors, shadow or change of axis. Below is just one example.
Again, if you don't see anything special you are probably looking at it with an older browser, like Internet Explorer Version 8 or less.
font-size: 6em;
color: #aae;
letter-spacing: 5px;
text-shadow:
3px 0px 0px #aaa, 0px 3px 0px #aaa, 3px 3px 0px #aaa,
-3px 0px 0px #222, 0px -3px 0px #222, -3px -3px 0px #222,
1px 1px 16px #000, -1px -1px 16px #135;
Crazy Effects
font-size: 4em;
color: #eef;
letter-spacing: 5px;
text-shadow:
Line 1: -1px -1px 0px #f33
Line 2: 1px 1px 0px #33f
Line 3: 1px 1px 0px #f3f, 1px 1px 5px #3d3, 3px 3px 3px #5f5
Check This Out!
How about this?
Hope you liked it.