Export (0) Print
Expand All
1 out of 5 rated this helpful - Rate this topic

box-shadow property

Specifies one or more set of shadow values that attaches one or more drop shadows to the current box.

CSS Backgrounds and Borders Module Level 3, Section 7.2Internet Explorer 9

Syntax

box-shadow: none | <shadow> [ , <shadow> * ]

Property values

none

Initial value. Indicates there is no shadow.

shadow

A shadow specified by two to four length values, an optional color, and an optional inset keyword. If more than one shadow is specified, each set of values is separated by a comma. The components of each shadow are interpreted as follows:

ValueDescription

horizontal offset

Required. The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.

vertical offset

Required. The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.

blur distance

Optional. The third length is a blur distance. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.

spread distance

Optional. The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.

color

Optional. The color is the color of the shadow. This value can be any supported color value.

inset

Optional. An inset keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

 

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

Remarks

As defined above, shadow is specified by the optional inset keyword, a horizontal offset value, a vertical offset value, a blur radius, a spread distance, and a color. This can be seen in the syntax below.

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

Examples

The following examples use the box-shadow property to create three types of drop shadows using the following HTML:



<body>
   <div id="square"></div>
</body>

In the first example, the first box-shadow value, 10px, is the horizontal offset of the shadow. Because it is a positive value, the offset is to the right of the blue square. The second value, also 10px, is the vertical offset of the shadow. Because this is a positive value, it offsets the value downwards. The third value, 5px, sets the blur distance. The lower the value, the sharper the shadow's edge. The last value, #B3B3B3, sets the color of the shadow.


#square {
   width: 100px;
   height: 100px;
   background-color: #4682B4;
   box-shadow: 10px 10px 5px #B3B3B3;
}

The following image shows the result:

A blue square with a drop shadow using the box-shadow property

The second example uses the inset keyword to create inner shadows.



#square {
   width: 100px;
   height: 100px;
   background-color: #228B22;
   box-shadow: inset -5px -5px 5px 1px rgba(0,0,0,0.5), inset 5px 5px 5px 1px rgba(0,0,0,0.5);
}

The following image shows the result:

A green square with inner drop shadows using the box-shadow property

You can simultaneously create inner and outer shadows by separating each shadow with a comma. In the third example, three shadows are added to an orange square.


#square {
   width: 100px;
   height: 100px;
   background-color: #FF8C00;
   box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 3px 0px rgba(0,0,0,0.2), inset 2px 2px 3px 0px rgba(0,0,0,0.2);
}

The following image shows the result:

A orange square with  inner and outer drop shadows

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
How to Add Drop Shadows with CSS3

 

 

Show:
© 2014 Microsoft. All rights reserved.