Course Technology Cengage Learning New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4

Box Shadows

To add shadows to a block-level element, apply the following box-shadow style:

box-shadow: color offsetX offsetY blur spread inset;

where color sets the shadow color, offsetX and offsetY set the offset of the shadow in the horizontal and vertical directions, blur defines the blurring of the shadow, and spread sets the size of the shadow relative to the size of the block element. Add the keyword inset to create an interior shadow rather than an exterior shadow.

Use the web form below to generate the CSS code for applying the box-shadow style to the preview box. You can insert multiple shadows by clicking the [+] box. You can remove shadows by clicking the [-] box. The corresponding CSS code appears below the preview box.

Box Shadow Styles

01
01
-60px60px
-60px60px
  0px60px
-60px60px

background-color: rgb(255, 255, 155); box-shadow: rgb(0, 0, 0) 3px 3px 6px;