Knowledge Base Overview

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.

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

Consider adding some space to shadows but especially with 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.

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.

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.

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.

Deboss Effect

Of course, we can make the opposite effect of emboss; simply swap the colors and we have a relief or deboss effect.

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.

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.

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.