Drop Shadows

Contact Us or call 1-877-932-8228
Drop Shadows

Drop Shadows

For older browsers (those that don't support CSS3), a drop shadow effect can be created by nesting one div inside of another div. Using relative positioning, the nested div, which will contain the content, can be pushed from the bottom right, thus allowing the outer div to show through. The outer div is then given a background color or image to create the drop shadow effect.

Take a look at the code below:

Code Sample:

CssBackgroundTricks/Demos/DropShadows.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Drop Shadows</title>
<style type="text/css">
body {
	padding: 10px;
}
p {
	margin: 0;
	padding: 10px;
}
.box {
	width: 95%;
	margin: 10px;
}
.box .content {
	position: relative;
	background-color: #fff;
	border: 1px solid #c0c0c0;
	bottom: 3px;
	right: 3px;
}
.shadow1 {
	background: #ddd;
}
.shadow2 {
	background: url('Images/bg-dropShadow.gif') bottom right;
}
</style>
</head>
<body>
<div class="box shadow1">
	<div class="content">
		<p>This box has a solid drop shadow effect applied.</p>
	</div>
</div>
<div class="box shadow2">
	<div class="content">
		<p>This box has a drop shadow effect applied using a single image.</p>
	</div>
</div>
</body>
</html>

Code Explanation

Things to notice:

  • The HTML markup is quite simple: one div inside of another.
  • The nested "content" div has relative positioning and is pushed up and to the left. It also takes a background color (white) and a 1 pixel grey border.
  • The shadow of the first box is created with a background color.
  • The shadow of the second box is created with a background image.

The result is shown below: Result

In the screenshot below, we put a dashed border around the shadow divs to show that they are largely covered by the "content" divs: Shadows with Border

That's it. As you can see, creating drop shadow effects is relatively easy. But using CSS3 is even easier! Let's look at how we can create drop shadows with less markup and with considerably more control over the color and position of the shadow.

CSS3 Drop Shadows: The box-shadow Property

With the box-shadow property, we can attach a drop shadow to an element. The code

.shadow {
	box-shadow: 5px 10px #000;
}

adds to any element of class shadow a shadow having horizontal offset of 5px (the first parameter - how far to the right the shadow falls), vertical offset of 10px (the second parameter - how far down the shadow falls), and color black (the third parameter, #000). Note that the horizontal and vertical offset values can be negative, to display the shadow to the left or top of the element.

The box-shadow property accepts a few more parameters - the code below

.shadow {
				box-shadow: 3px -5px 4px 2px #f00;
}

would add a shadow which has:

  • 3px horizontal (right) spread;
  • -5px vertical (top) spread;
  • 4px blur radius, giving the shadow a "fuzzy" edge;
  • 2px spread distance, extending the shadow 2 pixels away from the element in all directions; and
  • red (#f00) color.

We can add multiple shadows to an element, using commas to delineate each shadow:

.shadow {
				box-shadow: 5px 5px #f00, -5px -10px #00f;
}

Let's look at some examples:

Code Sample:

CssBackgroundTricks/Demos/DropShadowsCSS3.html
<!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 {
	box-shadow: 5px 5px 10px #999;
}
#box2 {
	box-shadow: 5px 5px 2px #999;
}
#box3 {
	box-shadow: 5px 5px 5px 10px #999;
}
#box4 {
	box-shadow: 2px 2px 5px #f00, -5px -5px 5px #00f;
}
</style>
</head>
<body>
<div id="box1" class="box">
	<p>Box1: box-shadow: 5px 5px 10px #999;</p>
</div>

<div id="box2" class="box">
	<p>Box2: box-shadow: 5px 5px 2px #999;</p>
</div>

<div id="box3" class="box">
	<p>Box3: box-shadow: 5px 5px 5px 10px #999;</p>
</div>

<div id="box4" class="box">
	<p>Box4: box-shadow: 2px 2px 5px #f00, -5px -5px 5px #00f;</p>
</div>
</body>
</html>

Code Explanation

The result is shown below: CSS3 Drop Shadows

Note that in our markup we have only a single div - there's no need for a second (and semantically meaningless) div element inside each box.

In box1 we display a gray shadow with horizontal and vertical 5px spread and blur radius of 10px.

In box2 we display a gray shadow with horizontal and vertical 5px spread and blur radius of 2px; box2's shadow had a harder edge than that of box1 because box2 has a smaller blur radius.

In box3 we display a gray shadow with horizontal and vertical 5px spread, blur radius of 5px, and spread radius of 10px - the spread radius extends the shadow off from the box.

Finally, in box4, we display two shadows: a red shadow down and right, and a blue shadow (with negative horizontal and vertical values) up and left.

Next