fbpx Skip to content

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:

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

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.



  1. Visitor on January 12, 2012 at 4:00 pm

    Hi there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Safari. I’m not sure if this is a formatting issue or something to do with browser compatibility but I thought I’d post to let you know. The design and style look great though! Hope you get the problem resolved soon. Many thanks

    • Jason on January 13, 2012 at 10:22 am

      Everything looks fine on my latest copy of Safari, but I will do more testing. Thanks

  2. cupola house on January 13, 2012 at 2:19 am

    Hey! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains. If you know of any please share. Appreciate it!

    • Jason on January 13, 2012 at 10:21 am

      I use all-in-one SEO & manually create all of my SEO meta tags, etc, making sure to include proper keywords, etc, in the article.

Leave a Comment

Scroll To Top