CSS box-shadow Property

The box-shadow property allows to implement multiple shadows around the box specifying values for color, size, blur, offset and inset. You can add effects separated by commas.

If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.

These are two values which set the shadow offset. H-offset specifies the horizontal distance. Positive values give shadow to the right of the element. Negative values place the shadow to the left of the element. V-offset specifies the vertical distance. Positive value gives shadow below the element. Negative values place the shadow above the element. If both values are 0, the shadow is placed behind the element.

The third value is a blur. The higher the number, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If the value is 0, the shadow's edge is sharp.

The fourth value is inset. It adds an inner shadow to the element. If it is a default, the shadow is assumed to be a drop shadow.

The fifth value is spread. Positive values will cause the shadow to expand, and negative values will cause the shadow to shrink. If the value is 0, the shadow will be the same size as the element.

The sixth value is color. It adds colors to the shadow. If this value is 0, the color used depends on the browser.

When using box-shadow property we need to use -moz- and -webkit- prefixes for Mozilla and Webkit.

Initial Value none
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. The shadow of the box is animatable.
Version CSS3
DOM Syntax object.style.boxShadow = "15px 25px 35px gray";

Syntax

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

Let’s try to add shadows to an element.

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: 5px 4px 10px #1c87c9;
      -moz-box-shadow: 5px 4px 10px #1c87c9;
      -webkit-box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow example</h2>
    <div></div>
  </body>
</html>

Result

Let’s add multiple shadows to a box.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 50%;
      height: 100px;
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Multiple shadows with box-shadow.</h2>
    <div></div>
  </body>
</html>

Result

Now let’s give the element an inset value. It adds shadow inside the box.

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 150px;
      height: 50px;
      background-color: #eee;
      box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -moz-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      -webkit-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow with inset value</h2>
    <div></div>
  </body>
</html>

Result

Values

Value Description
none No shadow is given.
h-offset Required. The horizontal offset of the shadow. A positive value gives the shadow on the right side of the box, a negative value gives the shadow on the left side of the box.
v-offset Required. The vertical offset of the shadow. A positive value gives the shadow below the box, a negative value gives the shadow above the box.
blur Optional. The shadow is blurred. The higher the number, the more blurred the shadow will be.
spread Optional. The shadow is spread. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
inset Optional. Turning the outset (outer shadow) into inset (inner shadow).
color Optional. The color of the shadow.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

4.0+ 12.0+ 3.5+ 5.0+ 11.5+




Related articles