CSS Properties Index   Box Attributes

---

Adds shadow effects around an element’s frame.

CSS	{ box-shadow: length (2,4) [ blur | spread | color | inset ] }
Script	object.style.boxShadow = length (2,4) [ blur | spread | color | inset ]

Parameter	Description	Value
h-offset	Required. The horizontal offset of the shadow. A positive value casts the shadow on the right side of the box, a negative value casts the shadow on the left side of the box.	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
v-offset	Required. The vertical offset of the shadow. A positive value casts the shadow below the box, a negative value casts the shadow above the box.	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be.	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
color	Optional. The color of the shadow. If not set, the default value is the current text color for the page.	String that specifies one of the color names or red-green-blue ( RGB ) values in the Color Table.*
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow.	inset

NOTE: Specifying the color as a color name may not be recognized by some browsers, whereas the RGB color value should always be displayed accurately.

The property is read/write with a default value of none; the CSS attribute is not inherited.

The boxShadow property applies an offset version of a visual object’s alpha mask drawn in a particular color, composited below or above the image.

A box shadow declaration requires X and Y offsets relative to the element, and optional blur, spread, and color attributes.

If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.

Authors can set multiple effects separated by commas. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top ).

(2,4) in the syntax indicates that two up to four different length values may be specified.

If only two length values are set, they are interpreted as offset-x and offset-y values, respectively. Negative offset-x value places the shadow to the left of the element. Negative offset-y value places the shadow above the element.

box-shadow: 8px 8px lightgray	box-shadow: -8px 8px lightgray
box-shadow: 8px -8px lightgray	box-shadow: -8px -8px lightgray

If a third length value is given, it is interpreted as a blur attribute. Negative blur values are not allowed and invalidates the entire box-shadow declaration.

box-shadow: 8px 8px 12px darkolivegreen	box-shadow: 8px 8px -12px darkolivegreen

If a fourth length value is given, it is interpreted as a spread attribute. Positive values will cause the shadow to expand, and negative values will cause the shadow to shrink.

box-shadow: 8px 8px 12px 6px darkslategray	box-shadow: 8px 8px 12px -4px darkslategray

Box-shadow with border-radius specified on the element.

border-radius: 10%; box-shadow: 9px 9px 6px gray

drop-shadow   text-shadow