CSS3 Text Shadows

Text Shadow… pretty!

OK, that was a little extreme. But seriously, text shadow can be sexy, and it’s really easy. So stop using images for text in your banners and call-to-actions!

The CSS3 text-shadow property shouldn’t be overused, but it allows web designers and developers an excellent alternative to using text, with shadows, as images in banners, calls-to-action, buttons, etc. Combine text-shadow with box-shadow and gradient, and your buttons can be standardized and you won’t have to touch Photoshop to build them!

I’ll get straight to it… here’s the code:

text-shadow:[x-offset]px [y-offset]px [spread]px [color];

So you might be looking at something like this in your CSS for whatever id, class or element you are styling:

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

Which would look something like this on standard text.

But if you bold the text, or maybe change the color… you might end up with something like:

Which would look something like this on standard text.

The most useful cases you are going to find is when you need to bring additional definition with a slight 1px black text-shadow on a white background (like the above orange text), or a large black text-shadow on top of an image in a header or banner. Otherwise, things look a little gimmicky, I think.

That being said, play around with it! Combine it with non-image button creation and fall in love.

TEST