Techie Tip of the Week: Adding drop shadow effects using box-shadow (CSS3)

A few months ago, we talked about how you can use cascading style sheets to add a drop-shadow effect to text by using the CSS property text-shadow.

Today, we’d like to show how you can add a drop-shadow effect to box elements, using the new CSS3 property box-shadow.

For example, suppose you want to have the words Stanford University highlighted in light grey background with a cardinal red drop shadow, here’s the code you would write:

<title>Stanford University</title>
<style type="text/css">
   -moz-box-shadow: 5px 10px 15px #820000;
   -webkit-box-shadow: 5px 10px 15px #820000;
   box-shadow: 5px 10px 15px #820000;
   background: #eee;
<h1>Stanford University</h1>

And here is how it will look (in most browsers — visit for details):
Stanford University with a drop-shadow

Tags: , ,

Leave a Reply

You must be logged in to post a comment.