HTML and CSS Reference
In-Depth Information
By combining the
blur-radius
with the off-
sets, you can set the apparent light source:
box-shadow:
rgb(0,0,0) 0px 12px 12px;
COMPLEX BOX SHADOWS
For complex effects, you can add multiple shadows in a comma-
separated list; they can all use different colors and directions. The fol-
lowing example has a red/orange shadow down and to the right and a
purple shadow up and to the left. Whether this is a good idea is up to
you!
The full
box-shadow
definition includes two additional, optional
elements:
<inset>
<color> <offset-x> <offset-y> <blur-radius>
<spread-radius>
inset
, if present,
puts the shadow
inside the element
instead of
outside.
spread-radius
is a
CSS length; it causes
the shadow to grow
(positive values) or
shrink (negative
values) relative to the
size of the element.
