What is Box Shadow

CSS3 Box Shadow is a new property to give shadow effects to any div, image, or block level Elements. You can choose your own color, width, height, blur, spread, offset and repetition. Unlike border, it not a part of CSS Box Model, thus doesn't effect the layout even if it is larger.Also we can add multiple shadows with different colors, width and offsets.


Box Shadow code

            
            
    border-shadow:0px 0px 10px 2px red ;				// all latest browsers

    -webkit-border-shadow:0px 0px 10px 2px red ;			// for Chrome and Safari

    -moz-border-shadow:0px 0px 10px 2px red ;				// for Mozilla based browser

    -ms-border-shadow:0px 0px 10px 2px red ;				// for IE 9 and above
	
    -o-border-shadow:0px 0px 10px 2px red ;				// Opera browsers
			
            
          

How Box Shadow Works

box shadow
Box Shadow

Outer Shadow

box-shadow: 0px 0px 5px 2px red;

shadow is equal from all four sides as x-offset and y-offset are zero. Blur is 5px, spread is 2px, and color is red.


box-shadow: -2px -2px 10px 0px blue;

shadow is 2px left and 2px top as both values are negative. Blur is 10px, spread is 0px(no solid color of shadow), and color is blue.



box-shadow: 2px 2px 10px 0px blue;

shadow is 2px from left and 2px from top as both values are positive. Blur is 10px, spread is 0px(no solid color of shadow), and color is blue.


box-shadow: 5px 5px 0px 5px aqua;

shadow is 5px from left and 5px from top as both values are positive. Blur is 0px, spread is 5px(only solid color of shadow), and color is aqua.



Inner Shadow

box-shadow: 2px 2px 5px 1px red inset;

shadow is 2px from left and 2px from top as both values are positive. Blur is 5px, spread is 1px, color is aqua, and inset is for inside shadow.


box-shadow: 0px 0px 20px 1px white inset;

shadow is 0px from left and 0px from top as both values are positive. Blur is 20px, spread is 1px, color is white, and inset is for inside shadow.


box-shadow: 0px 0px 80px 1px #bbb inset;

shadow is 0px from left and 0px from top as both values are positive. Blur is 80px, spread is 1px, color is #bbb, and inset is for inside shadow.

Multiple Shadows

box-shadow: -2px -2px 5px 1px #f00, -4px -4px 5px 0px #00f;

, is used a s separator in value, rest all values remains same.


box-shadow: -2px -2px 5px 1px #000, 2px 2px 5px 0px #f00;

black shadow is on left top, red shadow is on right bottom


box-shadow: -2px -2px 5px 1px #f00, 2px 2px 5px 0px #f0f, 0px 0px 50px 0px #000 inset;

three shadows, two offset, one inset

Some Cool Buttons using css3 border radius and box shadow



Browsers Compatibility

Chrome, Safari, Firefox 4, Opera, and IE9 support Box Shadow without any vendor prefix (exp. box-shadow). But we need to add another property like -moz-box-shadow for Firefox 3.6 and earlier.