Box Shadow

Contact Us or call 1-877-932-8228
Box Shadow

Box Shadow

CSS3 makes it easy to add drop shadowing to elements with the box-shadow property. Specify the horizontal and vertical widths of the shadow - and, optionally, the amount of blur, the size (spread) of the shadow, the shadow color, and whether the shadow should be an outer shadow (the default) or an inset shadow - and it's easy to add a shadow to a <div> or other element:

div.shadow {
	box-shadow: 20px 20px 15px #ccc;

The code above would render a gray (#ccc) drop shadow 20 pixels on the right and 20 pixels on the bottom, with a 15-pixel spread. Negative horizontal or vertical values give a left or top shadow, respectively. The example below illustrates the various properties of box-shadow:

Code Sample:

<meta charset="UTF-8">
<title>CSS Box Shadow</title>
<style type="text/css">
	.box {
		width: 130px;
		height: 130px;
		float: left;
		margin-right: 50px;
		background-color: #BCB866;
		padding: 30px;
	#box1 {
		box-shadow: -5px 15px 10px #CE3700;
	#box2 {
		box-shadow: 20px 20px 25px 10px #CE3700;
	#box3 {
		box-shadow: 10px 10px 10px #CE3700 inset;
<h1>CSS Box Shadow</h1>
<div id="box1" class="box">
	box 1
<div id="box2" class="box">
	box 2
<div id="box3" class="box">
	box 3

Open ClassFiles/BordersMarginsAndPadding/Demos/BoxShadow.html in a code editor and in a browser to view the page. The page shows three tan <div>s, each with a red shadow. The first ("box 1") has a negative horizontal distance (-5px) and positive (15px) vertical distance - thus getting a shadow on the left and bottom.

box shadow demo

The second ("box 2") has a shadow on the right and bottom; note that its larger spread value makes its edge "fuzzier" than that of "box 1".

The last ("box 3") has, because of the inset keyword, an interior shadow.

The box-shadow property is supported by Internet Explorer from version 9.