Box lighting effect
box-shadow
Cast a drop shadow across the element's box using a light source from a specified direction and distance.
Property values
This property expects six values: inset, offset-x, offset-y, blur-radius, spread-radius, and color. Only the offset-x, offset-y and blur-radius are required. Inset, spread-radius and color are optional.
If the inset keyword is specified as the first value, the shadow will be cast inside the element's border. If the inset keyword is omitted, the shadow will be cast in its more typical way, outside the element's border.
Positive values for offset-x and offset-y define a light source above and to the left, casting a shadow below and to the right. Negative values have the opposite effect.
Larger blur-radius values create a wider and more diffuse light scatter.
Positive spread-radius values cause the shadow to lengthen. Negative spread-radius values cause the shadow to shrink.
More than one shadow may be specified by separating each group of six values with commas.
Examples
/* classic shadow */
box-shadow: 2px 2px 4px black;
/* inset shadow */
box-shadow: inset 2px 2px 4px black;
/* double light source */
box-shadow: 2px 2px 4px black, -2px -2px 4px white;