Everything you need to know about CSS text shadows

Originally proposed for CSS 2.1 but brand new to CSS3, text shadows are a great way to liven up your text without needing to use images. Text shadows can be as simple or as complicated as you want to make them; it all depends on what other effects you’re combining with your shadow and how it interacts visually with the rest of your page.

We use several different types of text shadows here at Text Effects, and we’re only too happy to share how they’re done. Best of all, all you need is a couple of lines of code and a little bit of time to create perfect, easy to edit shadow effects.

The text-shadow property is supported in all the main browsers; however, it’s not compatible with Internet Explorer prior to version 10. Always check your text in older versions of IE to make sure it’s still readable.

How to create a CSS text shadow

The CSS for a text shadow is very simple. Just copy and paste the following line into your stylesheet (most likely called style.css):

text-shadow: 2px 2px #000;

This will add a basic black shadow to your H1 title tags. Change #000 to the hex code colour of your choice, and adjust the 2px to whatever position you want your shadow to adopt relative to your text. For more tips on changing the text shadow and working with a little more code, check out this CSS Tricks tutorial.

Copy and paste resources

If you want to minimise your coding time even further, why not try some more detailed copy-and-paste text shadow effects? We like this text shadow generator and Design Shack’s 12 Fun CSS Text Shadows You Can Copy and Paste. With a little bit of tweaking, you’ll have something that looks unique and works really well with any design.

Text Shadow Tips

To prevent your text shadow looking like it’s from the 1990s, limit the blur and choose a complementary font. Avoid generics such as Times New Roman, especially if you aren’t using a bold weight or a broad font.

Only combine text shadows with effects that make sense. For example, giving your font a text shadow as well as adding an effect to make it look engraved or ‘sunken’ into the page isn’t realistic as it defies the laws of physics; it can’t stand out from the page and be sunken into it simultaneously. Such combinations of effects will always have that ‘not quite right’ look about them, so be careful how you stack them.

Other than that, enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *