How to add text shadows using CSS

One of many new possibilities that comes with CSS3 is the ability to add shadows on texts. It is an easy way of making a regular design a bit prettier, but it can also be useful to make some text elements easier to read. Browser support for text shadows is still not perfect as Internet Explorer has not had support for it, but the effect works well in newer versions of most other browsers (such as Firefox, Safari and Chrome). I have used it in a couple of the newer templates, such as the recently released Variant Multi (alt) (where it is used on both headers and content text) and in the mobile version of the Learn CSS template where a text shadow is used to make the white site title more visible against a light yellow background image.

The code needed…

To add your own text shadow, the first thing to do is to identify where you want the shadow to appear. If you want to add a shadow to all h2 header tags, then find the CSS for the h2 tags (or create it if needed, and add the following code:

h2 {text-shadow:#888 2px 2px 3px;}

“text-shadow” is the property used, and the value it is given here is “#888 2px 2px 3px”. The first part of the value is the color of the shadow, which in this example is grey. The following two values defines the distance for the shadow in relation to the text. First comes the horizontal distance and then the vertical distance, measured in pixels. “2px 2px” moves the shadow two pixels to the right, and then two pixels down from the text position. To move the shadow to the left and up, use negative values, like “-2px -2px”. If both values are set to zero, the text-shadow can work as a “glow”-like effect below the text.

The third pixel value defines the blur radius of the shadow. The lower the value, the sharper the shadow will be. If set to zero, the shadow will be as sharp as the original text. By using a 3px radius, the shadow will fade from the defined color (#888) to the color of the background over a 3-pixel distance.

What value is the best for different kinds of texts? That depends on many factors. background color, font size and what kind of effect you want to get. The best thing to do is to try different values, starting with a light shadow and a small distance and blur radius. Be careful when using text shadows on content text, as the effect should not be used in a way that makes the text difficult to read.

Advanced shadows

The above example shows the absolute basics of the text shadow. The effect can be used in many different ways, and there are a lot of interesting examples to find on the web. For example, you can apply multiple shadows at once, using different colors and distances. For some interesting examples of how to use CSS text-shadow, visit W3.org or kremalicious.com.

css, css3, tutorials