CS - BOX SHADOWS

giving a 3-D effect to block-level elements, cool...


Tuts Library »

The Finished Product

Used to cast shadows off block-level elements (like divs).

There are 5 properties that can be used when adding shadows. Three are required and two others are optional:

Box-Shadow Properties

Horizontal Offset (required)
A positive offset value will put the shadow on the right of the box, a negative offset will put the shadow on the left of the box.
Vertical Offset (required)
A positive offset will put the shadow below the box and a negative offset will place the shadow at the top.
Blur Radius (optional)
A value of 0, zero will produce a sharp or well defined shadow. The higher the number, the more blur is added to the shadow.
Spread Radius (optional)
Positive values increase the size o fthe shadow where negative values decrease the size. The default is 0, zero meaning, (the shadow is the same size as the blur).
Color (required)
You can use rgba values: rgba(0,0,0,0.4); or hex values: #222222; and even color names: darkblue;.

Example 1 - Bottom Right


Example 2 - Top Left


Example 3 - Inset


Example 4 - Single Side


Box-Shadow - BONUS

How It's Done

CSS Box-Shadow Settings - see EXAMPLE 1

.box-shadow-ex1 {
	-webkit-box-shadow: 3px 3px 8px 1px #222222;
	-moz-box-shadow: 3px 3px 8px 1px #222222;
	box-shadow: 3px 3px 8px 1px #222222;
}
					

CSS Box-Shadow Settings - Using negative values. see EXAMPLE 2

.box-shadow-ex2 {
	-webkit-box-shadow: -3px -3px 8px 1px #222222;
	-moz-box-shadow: -3px -3px 8px 1px #222222;
	box-shadow: -3px -3px 8px 1px #222222;
}
					

CSS Box-Shadow Settings - Inner Shadow. see EXAMPLE 3

.box-shadow-ex3 {
	-webkit-box-shadow: inset 0px 0px 20px #222222;
	-moz-box-shadow: inset 0px 0px 20px #222222;
	box-shadow: inset 0px 0px 20px #222222;
}
					

CSS Box-Shadow Settings - Single Sided. see EXAMPLE 4

.box-shadow-ex4 {
	-webkit-box-shadow: 0px 8px 6px -6px #222222;
	-moz-box-shadow: 0px 8px 6px -6px #222222;
	box-shadow: 0px 8px 6px -6px #222222;
}
					

CSS Box-Shadow Settings - BONUS

.box-shadow-bonus {
	margin: 20px;
	height: 150px;
	width: 150px;
	background-color: #ff8c00;
	border: 10px solid #0000cd;
	border-radius: 500px;
	box-shadow: 20px 20px 14px 14px rgba(25,25,112,0.5), 
		    8px 10px 0px 18px rgba(0,0,0,0.7) inset;
}
					

Update:

All major web browsers, [ Chrome, Safari, Firefox, Opera and IE9+ ], will now work with standard CSS call: box-shadow: 2px 3px 4px 5px #222222;. The prefixes are no longer needed.

TIP:

You can actually add two box-shadow properties to the <div>. This has been used to create a cool "stitched" effect. You can see it here first hand.