CSS box-shadow Property
Example
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px;
}
#example2 {
border: 1px solid lightgreen;
padding: 10px;
box-shadow: 5px 10px #543210;
}Meaning
The box-shadow property adds shadow effects around an element's frame. It can be set multiple effects separated by commas.
A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
| Default value: | none |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| none | This is default value. No shadow will be displayed. |
| offset-x | (Required) 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 | (Required) 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. |
| blur-radius | (Optional) 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 | (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. If not specified, it is usually the value of the color property. |
| inset | (Optional) 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. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
box-shadow: none;
}The following example add shadow effects:
Example
div {
width: 200px;
background-color: red;
padding: 25px;
box-shadow: 10px 10px;
}The following example add yellow shadow effects:
Example
div {
width: 200px;
background-color: red;
padding: 25px;
box-shadow: 10px 10px yellow;
}The following example blur shadow effects:
Example
div {
width: 200px;
background-color: red;
padding: 25px;
box-shadow: 10px 10px 10px;
}The shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.
The following example create spread-radius shadow effect:
Example
div {
width: 200px;
background-color: red;
padding: 25px;
box-shadow: 10px 10px 10px 15px;
}The inset 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.
The following example show how to use inset parameter:
Example
div {
width: 200px;
background-color: red;
padding: 25px;
box-shadow: 10px 10px inset;
}The following example show how add multiple shadow boxs:
Example
div {
width: 200px;
border: 1px solid;
padding: 25px;
box-shadow: 5px 5px red, 10px 10px green, 15px 15px blue;
}