OUTER AND INNER BOX-SHADOWS

A CSS SYNTAX OVERVIEW

X-offset: right or left (-) Y-offset: bottom or top (-) Blur Spread Color

Necessary Necessary Optional Optional Optional

box-shadow: 0 -10px 4px -2px #707070;

box-shadow: 0 10px 4px -2px #707070;

box-shadow: -10px 0 4px -2px #707070;

box-shadow: 10px -10px 4px -2px #707070;

box-shadow: -10px -10px 4px -2px #707070;

box-shadow: 10px 10px 4px -2px #707070;

box-shadow: -10px 10px 4px -2px #707070;

Inner shadows: use keyword "inset" and reverse offset values
(plus becomes minus)

box-shadow: inset 0 10px 4px -2px #707070;

box-shadow: inset -10px 0 4px -2px #707070;

box-shadow: inset 0 -10px 4px -2px #707070;

box-shadow: inset 10px 0 4px -2px #707070;

box-shadow: inset -10px 10px 4px -2px #707070;

box-shadow: inset 10px 10px 4px -2px #707070;

box-shadow: inset -10px -10px 4px -2px #707070;

box-shadow: inset 10px -10px 4px -2px #707070;

Combinations: separate with comma

box-shadow: -10px 0 4px -2px #707070,
10px 0 4px -2px #707070;

box-shadow: 0 -10px 4px -2px #707070,
0 10px 4px -2px #707070;

box-shadow: 0 -10px 4px -2px #707070,
inset 0 -10px 4px -2px #707070;

box-shadow: 10px -10px 4px -2px #707070,
inset 10px -10px 4px -2px #707070;