How to Create Drop Shadows with the box-shadow Property in CSS3

Written by Nat Dunn.

See CSS: Tips and Tricks for similar articles.

With the box-shadow property, we can attach a drop shadow to an element. Here's how:

  1. Start with an HTML page containing three boxes.
    2. 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Drop Shadows</title>
<style type="text/css">
body {
	padding: 30px;
}
p {
	margin: 0;
	padding: 10px;
}
.box {
	width: 90%;
	margin: 30px;
	background:#000;
	color:#fff;
}
#box1 {

}
#box2 {

}
#box3 {

}

</style>
</head>
<body>
<div id="box1" class="box">
	<p>Box1</p>
</div>

<div id="box2" class="box">
	<p>Box2</p>
</div>

<div id="box3" class="box">
	<p>Box3</p>
</div>

</body>
</html>
    If you open this page in a browser, it looks like this: Boxes without shadows
  2. A drop shadow can be applied to an element using just as few as three values. To create a simple drop shadow, add the following box-shadow property to box1. 
    
#box1 {
	box-shadow: 5px 10px #000;
}
    The first value (5px) is the horizontal offset, or how far to the right the shadow falls. The second value (10px) is the vertical offset, or how far down the shadow falls. The third value (#000) is the color of the shadow. Note that the horizontal and vertical offset values can be negative, to display the shadow to the left or top of the element.
  3. Create a more complex and realistic shadow with the addition of two more values before the color: the blur radius (4px in the following example), which gives the shadow a "fuzzy" edge, and the spread distance (2px in the following example), which extends the shadow away from the element in all directions. 
    
#box2 {
	box-shadow: 5px 10px 4px 2px #f00;
}
  4. You can add multiple shadows to an element with one box-shadow property by separating sets of values with a comma, like this: 
    #box3 {
	box-shadow: 5px 5px #f00, -5px -10px #00f;
}
  5. Open the HTML page in a browser. The three boxes should look like this: Boxes with Drop Shadows