O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

box-shadow

Values:

none | <shadow> [ , <shadow> ]*

Expansions:

<shadow>

inset? && [ <length>{2,4} && <color>? ]

Initial value:

none

Applies to:

All elements

Inherited:

No

Computed value:

As declared with lengths made absolute and colors computed

Description:

Defines one or more shadows that are derived from the shape of the element box. Either outset (“drop”) shadows or inset shadows can be defined, the latter with use of the optional inset keyword. Without that keyword, the shadow will be outset.

The four length values that can be declared are, in order: horizontal offset, vertical offset, blur distance, and spread distance. When positive, the offset values go down and the right; when negative, back and to the left. Positive spread values increase the size of the shadow and negative values contract it. Blur values cannot be negative.

Note that all shadows are clipped by the element’s border edge. Thus, an outset shadow is only drawn outside the border edge. A semitransparent or fully transparent element background will not reveal an outset shadow “behind” the element. Similarly, inset shadows are only visible inside the border edge and are never drawn beyond it.

Examples:

h1 {box-shadow: 5px 10px gray;}
table th {
     box-shadow: inset 0.5em 0.75em 5px −2px
     rgba(255,0,0,0.5);}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required