How-to: CSS3 shadow effects – Part One

Posted by Stuart Shields | Posted on April 27, 2011 | In CSS3

With the introduction of CSS3 we have the ability to add drop shadows to our websites. Whether it be adding an effective yet stylish text shadow or adding a shadow to a content box to make it stand out, all major browsers (except for IE9 which only supports the Box Shadow) now support the yet to be finalized CSS3 tags. In this two part series you’ll learn how to add shadows to both text and boxes.

How to create a CSS3 Text Shadow

To enable Text Shadows in CSS3 you must make sure you have one of the following types of browsers that support it as a minimum: Firefox 3.6, Safari 4, Google Chrome 4/5, Opera 10.50. Unfortunately IE9 does not support text-shadow as seen on the list of CSS compatibility list.

CSS3 Text Shadow

CSS3 Text ShadowThe Code

text-shadow: 2px 3px 4px #333;

The break down

From left to right here is the break down of the text-shadow attributes:

  • X-Coordinate
  • Y-Coordinate
  • Blur Radius
  • Color of the shadow

Adding a text-shadow is pretty simple, the only limitation is your imagination, oh and Internet Explorer.

Don’t forget

Not everyone is going to have a CSS3 capable browser, so don’t forget if you want to give everyone the user experience of seeing shadows on text or boxes, there are some really nice jQuery scripts. Once again these will only work if people have javascript enabled, which most people do these days.

What not to do

With the introduction of such useful tags into the website ecosystem people will by nature abuse this new ability by creating ugly shadows on content that doesn’t need or require it. Remember the 90′s when everyone was getting into Photoshop? So many people added a drop shadow to their layouts thinking it looked cool. Sorry people! It doesn’t look cool to overuse an effect in your designs!


Stuart Shields

Is the founder of Webdesign He specialises in HTML, CSS, PHP & MYSQL and jQuery

More Articles by this Author | Authors Website | Follow on Twitter