CSS box-shadow Property

The box-shadow property adds a shadow effect to an element.

An element can have one or more box shadows.

Example

#

An element with a colored box-shadow.

A lavender 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>

Syntax

box-shadow: none | h-offset v-offset blur spread color | 
            inset | initial | inherit;

Values

#

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.

More Examples

Click the buttons to see the different box-shadow values.

box-shadow: 5px 10px 15px lavender inset
<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>

Did you know?

Did you know?

Box-shadow and images

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" />

Browser support

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

You may also like

Guides