box shadow

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS3 box-shadow Property

Example

Add a box-shadow to a <div> element:

div {
    box-shadow: 10px 10px 5px #888888;
}

Definition and Usage

The box-shadow property attaches one or more shadows to an element

CSS Syntax

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Note: The box-shadow property attaches one or more shadows to an element. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0. 

Property Values

Value Description  
none Default value. No shadow is displayed  
h-shadow Required. The position of the horizontal shadow. Negative values are allowed  
v-shadow Required. The position of the vertical shadow. Negative values are allowed  
blur Optional. The blur distance  
spread Optional. The size of shadow. Negative values are allowed  
color Optional. The color of the shadow. The default value is black. Look at CSS Color Values for a complete list of possible color values.

Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all.