Simple Text Shadow Effect using CSS3

Here are some cool and easy to implement text shadow effect that I have been using a lot recently. They don’t take much but they do add a lot more depth and detail to your text. That one is subtle but looks great. All it takes is this little bit of CSS.

text-shadow: #fff 0 1px 0;

The text-shadow style accepts four different values:

• The color (hex code)
• The x-coordinate relative to the text (pixels)
• The y-coordinate relative to the text (pixels)
• The blur radius (pixels)

For the code above, I have set the color to white (#fff) with no x-coordinate value, a 1 pixel y-coordinate value and no blur radius. So my white text-shadow appears as a white stroke 1 pixel below my text, giving it a bit of depth. You can also use a similar style to create a letterpress effect. This effect uses the following CSS:

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

We could even take it a step further and add a second text-shadow. The text-shadow style also accepts multiple settings, separated by a comma. The above CSS looks like this:

text-shadow: -1px -1px 2px #333, #777 0 2px 3px;

The difference is subtle but very effective. Here are some examples of other text shadows:

text-shadow: #444 1px 1px 1px;

text-shadow: #000 0 0 20px;

text-shadow: #222 1px 1px 0

As it stands, the text-shadow style does not work in current releases of IE, though it is suppose to work in IE 9.