css3 drop shadow | css boxshadow

CSS3 drop shadow or css box shadow allows you to add shadow to the css element. It can be either outer or inner shadow with color, blur, size and offset.

Image may be NSFW.
Clik here to view.

Also try css3 drop shadow generator.

CSS3 Box Shadow Compatibility:

CSS3 drop Shadow is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.

Image may be NSFW.
Clik here to view.

[ css3 box shadow compatibility Table via caniuse.com ]

CSS3 Shadow Syntax:

Below is the syntax for CSS3 box shadow

<shadow> = inset? && [ <length>{2,4} && <color>? ]

box-shadow: h-shadow v-shadow blur spread color inset;

1. Horizontal offset of shadow: positive value casts the shadow right of the element, negative value casts shadow on the left.

2. Vertical offset of shadow: Positive value casts shadow down and negative value casts shadow upward.

3. Blur Radius: controls the blurness of the element. Min value is zero.

4. Spread distance: Increasing spread distance increase shadow shape in all directions.

5. color: The shadow color can be hexadecimal value or RGBA value.

6. inset: Adding inset keyword as last parameter casts the shadow inwards of the element.

Simple example of CSS3 shadow:

Below is simple example of adding dropshadow to an css element.

.boxshadowStyle{
	 /* Webkit (Safari/Chrome) */ -webkit-box-shadow: 0px 26px 21px 0px #CCCCCC;
	/* Mozilla Firefox */ -moz-box-shadow: 0px 26px 21px 0px #CCCCCC;
	/* Proposed W3C Markup */ box-shadow: 0px 26px 21px 0px #CCCCCC;
	}

Image may be NSFW.
Clik here to view.

[ simple drop shadow demo ]

CSS3 drop shadow with RGBA:

We also can use RGBA color “rgba(68,68,68,0.6)” instead of using hexadecimal one “#CCCCCC”.

Below sample code uses RGBA color code.

.boxshadowStyle{
	 /* Webkit (Safari/Chrome) */ -webkit-box-shadow: 0px 26px 21px 0px rgba(68,68,68,0.6);
	/* Mozilla Firefox */ -moz-box-shadow: 0px 26px 21px 0px rgba(68,68,68,0.6);
	/* Proposed W3C Markup */ box-shadow: 0px 26px 21px 0px rgba(68,68,68,0.6);
	}

Note: Here 0.6 is alpha which controls the transparency.

RGBA stands for RED, GREEN, BLUE and ALHPA

CSS3 inset shadow:

Remember an ‘inset‘ keyword need to be supplied to cast the shadow inwards means the css shadow will be casted inside the css element itself.

While using the inset drop shadow the shadow is clipped with in the css element.

Image may be NSFW.
Clik here to view.

[ inset drop shadow demo ]

CSS3 inset shadow code:

.boxshadowStyle{
	 /* Webkit (Safari/Chrome) */ -webkit-box-shadow: inset 13px 11px 30px 0px #CCCCCC;
	/* Mozilla Firefox */ -moz-box-shadow: inset 13px 11px 30px 0px #CCCCCC;
	/* Proposed W3C Markup */ box-shadow: inset 13px 11px 30px 0px #CCCCCC;
	}

Note: The inset keyword added above.

Keywords to here:

• css3 border shadow
• css3 drop shadow
• drop shadow css
• css shadow
• css3 box shadow

Related posts:

1. CSS3 Generator
2. CSS3 Multi-column layout | CSS
3. css3 rounded corners | css border radius ie
4. To increase the number of entries in the drop-down list box
5. CSS background image