Course Technology Cengage Learning New Perspectives on HTML and CSS
Tutorial 8

CSS box-shadow style

This page demonstrates how to apply the CSS3 box-shadow style. Use the input controls to specify the background color of the box in the Preview window. You can then apply a box shadow by specifying whether to place the shadow outside the box (default) or within (inset) and setting shadow color, offset in the horizontal and vertical direction, blurring size, and shadow spread. All distances are expressed in pixels. Press the Tab key to update the appearance of the text shadow in the Preview box. The corresponding CSS3 style rule is displayed in the Style box.

Note that Internet Explorer prior to Version 9 does not support the box-shadow style.

background-color (rgb) ( , , )
shadow placement
shadow color (rgb) ( , , )
shadow offset x (px)
shadow offset y (px)
shadow blur (px)
shadow spread (px)

Preview

Style

none