box-shadow

Box-shadow is a CSS3 property witch attaches one or more drop-shadows to the box. This property applies to all elements, including ::first-letter selector. Multiple box-shadows are possible, separated by comas. Z-ordering of multiple box-shadows – the first specified shadow is on top.

Syntax:

box-shadow:[inset][horizontal-shadow][vertical-shadow] [blur-radius] [spread-radius] [color]; 

Horizontal-shadow – required – the position of the horizontal shadow.

  • (+) – positive value means that shadow will be on the right side of the box;
  • (-) – negative value means that shadow will be on the left side of the box;

Vertical-shadow – required- the position of the vertical shadow.

  • (+) – positive value means that shadow will be below box;
  • (-) – negative value means that shadow will be above box;

Blur-radius – optional – the blur distance.

  • (0) – If value is equal 0 the shadow will be sharp.

The higher value the more blurred shadow will be. The value of blur radius is added to horizontal/vertical offset ( 10px offset + 10px blur = 20px shadow).

Spread radius – optional – the size of shadow.

  • (0) – value equal to zero (default value) means that spread is the same as blur;
  • (+) – positive value increase the size of the shadow;
  • (-) – negative value decrease the size of the shadow;

Color – required – rgba, hsla, text, hex. If omitted, the color of box shadow will be equal to rgb(0, 0 , 0). Caution: Safari 5.1.7 for windows ignores the rule if color is omitted.

inset – optional – changes drop shadow from an outer box-shadow to inner box-shadow.
Default value is none.

 

box-shadow horizontal and vertical values

Examples:

The shadow on all sides of the box

.bx1 {
	-webkit-box-shadow: 0 0 30px 0 rgba(237, 14, 14, 0.5);
	box-shadow: 0 0 30px 0 rgba(237, 14, 14, 0.5);
}

The shadow at the right and bottom of the square

.bx2 {
	-webkit-box-shadow: 10px 10px 20px 0 rgba(237, 14, 14, 0.5);
	box-shadow: 10px 10px 20px 0 rgba(237, 14, 14, 0.5);
}

The shadow at the top and left of the square

.bx3 {
	-webkit-box-shadow: -10px -10px 20px 0 rgba(237, 14, 14, 0.5);
	box-shadow: -10px -10px 20px 0 rgba(237, 14, 14, 0.5);
}

The shadow at the bottom of the square

.bx4 {
	-webkit-box-shadow: 0 20px 20px -15px rgba(237, 14, 14, 0.5);
	box-shadow: 0 20px 20px -15px rgba(237, 14, 14, 0.5);
}

The shadow – inset

.bx5 {
	-webkit-box-shadow: 0 0 30px 0 rgba(237, 14, 14, 0.5);
	box-shadow: inset 0 0 30px 0 rgba(237, 14, 14, 0.5);
}

Multiple shadows

.bx5 {
	box-shadow:  -10px 10px 10px rgba(237, 14, 14, 0.5),  10px -10px 10px #4BB29E ;
}

Browser compatibility

box-shadow

Internet Explorer
9.0 In order to get shadows in IE9 you need to set border-collapse:separate;, even if it is not the table html element.
Firefox
4.0
Chrome
10.0
Safari
5.0 (-webkit-)
5.1
Opera
10.5
Mobile
Safari Mobile
7.0
Android
2.3 (-webkit-) 4.1
Chrome Mobile
works
IE Phone
works
Opera Mini
not supported
Opera Mobile
works