The box-shadow property adds a shadow effect to an element.
An element can have one or more box shadows.
An element with a colored box-shadow.
<style>
.box-shadow {
padding: 15px;
border: 1px solid steelblue;
box-shadow: 5px 10px lavender;
}
</style>
<div class="box-shadow">
A lavender box shadow
</div>
box-shadow: none | h-offset v-offset blur spread color |
inset | initial | inherit;
| Value | Description |
|---|---|
| none | Default. No shadow |
| h-offset | Required, the horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box |
| v-offset | Required, the vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box |
| blur | Optional, blur radius. The higher the number, the more blurred the shadow will be |
| spread | Optional, spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow |
| color | Optional, shadow color. The default value is the text color. |
| inset | Optional changes the shadow from an outer shadow (outset) to an inner shadow |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different box-shadow values.
<style>
.box-shadow-example {
padding: 25px;
border: 1px solid steelblue;
box-shadow: 5px 10px 15px lavender inset;
}
</style>
<div class="box-shadow-example">
box-shadow: 5px 10px 15px lavender inset
</div>
Images can also be enhanced with a box-shadow.
<style>
.box-shadow-image {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width: 250px;
margin: 10px;
}
</style>
<img src="/img/css/vangogh.jpg" class="box-shadow-image" />
This table shows when box-shadow support started for each browser.
 Chrome
|
10.0 | Mar 2011 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
10.5 | Feb 2010 |
 Safari
|
5.1 | Oct 2011 |
