CSS3 TUTORIALS: BOX SHADOW EFFECTPreviously, we wrote a tutorial on creating rounded corners with the aid of CSS3. Todays tutorial is on another great effect that can be achieved using a CSS3 property, box-shadow. This box-shadow property enables you to apply one or more drop-shadow effect to a box. And again, this effect is only supported in Firefox, Safari, Chrome, and Opera for now.Box-shadow property contains six attributes:box-shadow: 1px 1px 1px 1px rgba(0,0,0,1) inset;property: x-offset, y-offset, blur distance, spread distance, color, inset attribute for inner shadows ; Attributes Description x-offset Horizontal offset of the shadow. Positive values to make the shadow fall on right side of box. Negative values to make shadows fall on the left. y-offset Vertical offset of the shadow. Positive values to make the shadow fall below the box. Negative values to make shadows fall on top of box. Blurdistance Negative values are not allowed. If the value is zero, the shadows edge will be sharp. The more positive the value, the more blur the shadow is. Spread distance Negative values cause shadow to shrink inwards. Positive value makes the shadow to expand in all the directions. Inset Adding this attribute to the syntax will create an inner shadow effect. Color Color of the shadow. HEX code, RGB or RGBA can be used as the value. Here are some examples grouped according to the attributes used. Ive used RGBA for the color. So, I want to explain about RGBA too. RGBA works similar like the previous RGB used in CSS2. But, RGBA includes alpha to allow specification of the opacity of a color.rgba(R,G,B,A)R : 0-255G: 0-255B: 0-255A:0-1If you are less familiar with RGB color, you can use online generators and then add an opacity value to create RGBA.CSS3 box-shadow ExamplesWithout box-shadow usageThis normal box with sharp-edge corners was created using the following code.<div style=background-color:#F1F1F1; border:3px solid #DDDDDD;></div>This normal box with rounded corners was created using the following code.<div style=background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;></div>Shadow ( x-offset and y-offset attibutes used)-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);box-shadow: 5px 5px rgba(0,0,0,0.4);-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);box-shadow: 5px 5px rgba(0,0,0,0.4);-webkit-box-shadow: -5px -5px rgba(0,0,0,0.4);-moz-box-shadow: -5px -5px rgba(0,0,0,0.4);box-shadow: -5px -5px rgba(0,0,0,0.4);Blur Attribute usage-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);box-shadow: 5px 5px 5px rgba(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);box-shadow: 0px 0px 20px rgba(0,0,0,0.4);Spread Attribute usage-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);-webkit-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);-moz-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);Inset Attribute usage for inner shadow-webkit-box-shadow: 10px 10px inset rgba(0,0,0,0.4);-moz-box-shadow: 10px 10px rgba(0,0,0,0.4) inset;box-shadow: 10px 10px rgba(0,0,0,0.4) inset;Inset with Blur-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;Inset with Blur and Spread-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;From now on, we have planned to write about CSS3 tutorials and hope these tutorials are helpful.Related Posts:CSS3 Tutorials: Rounded CornersMintShare Pure CSS & HTML Based Social Share WidgetHow To Add Subscribe Widget On Blogger SidebarHow