box-shadow is a CSS3 property that attaches one or more drop shadows to a box. This property applies to all elements, including the ::first-letter selector. Multiple box shadows are possible, separated by commas. The z-ordering of multiple box shadows is determined by the order they are specified in the box-shadow property, with the first specified shadow on top.

Syntax:

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

Horizontal-shadow (offset-x) – 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 (offset-y) – 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 (bigger and lighter). Negative values are not allowed. 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.

Examples:

The shadow on all sides of the box

The offset-x and the offset-y must be set to 0.

See the Pen
qBdVYjo by majadc (@majadc)
on CodePen.

The shadow at the right-bottom and left-top of the element

See the Pen
box-shadow: offset-x offset-y by majadc (@majadc)
on CodePen.

The shadow at the one side of the element

See the Pen
box-shadow-one side of the box by majadc (@majadc)
on CodePen.

box-shadow: inset

See the Pen
box-shadow: inset by majadc (@majadc)
on CodePen.

Multiple shadows

See the Pen
multiple shadows by majadc (@majadc)
on CodePen.

blur-radius

See the Pen box-shadow: blur-radius by majadc (@majadc) on CodePen.

spread-radius

See the Pen box-shadow: spread-radius by majadc (@majadc) on CodePen.

Resources

• MDN box-shadow