CSS3 box-shadow Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The box-shadow CSS property applies one or more shadow effects to an element's box.
The following table summarizes the usages context and the version history of this property.
| Default value: | none |
|---|---|
| Applies to: | All elements. It also applies to ::first-letter. |
| Inherited: | No |
| Animatable: | Yes. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the box-shadow property in action.
Example
Try this code ».shadow{
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #999;
box-shadow: 2px 2px 4px 2px #999;
}You can use the inset keyword to apply the shadow inside of the element's box. Inset shadows are drawn inside the border, above the background, but below content.
Example
Try this code ».shadow-inside{
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #999;
box-shadow: inset 0 0 6px 2px #999;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| Required — The following values must be specified for the property to be valid. | |
| offset-x | The first length value specifies the horizontal distance of the shadow. A positive value draws a shadow that is offset to the right of the box, whereas a negative value offsets the shadow to the left. |
| offset-y | The second length value specifies the vertical distance of the shadow. A positive value offsets the shadow down, whereas a negative value offsets the shadow above the element. |
| Optional — The following values are optional. | |
| blur-radius | The third length value is a blur distance. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Default value is 0, the shadow is sharp. Negative values are not allowed. |
| spread-radius | 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 | The color is the color of the shadow. This value can be any supported color value. If not specified, it is usually the value of the color property. |
inset |
If present, changes the drop shadow from an outer shadow to an inner shadow. Inset shadows are drawn inside the border, above the background, but below the content the element. |
none |
No shadow will be displayed. This is default value. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element box-shadow property. |
Browser Compatibility
The box-shadow property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Drop Shadows, CSS Pseudo-elements.
Related properties: text-shadow.
