CSS box-shadow Property

The box-shadow property allows to add multiple shadows around the box specifying values for color, size, blur, offset and inset.

The box-shadow property is one of the CSS3 properties.

You can add effects separated by commas. If you specify a border-radius on the element with a box shadow, the box shadow will take the same rounded corners.

With the box-shadow property, we need to use -moz- and -webkit- prefixes for Mozilla and Webkit.

These are two values that 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 side 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 will be 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.

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 of the box-shadow property:

<!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

Multiple shadows

You have the opportunity to comma separate the box-shadow for many times. For example, using the code below will show 3 shadows with multiple colors and positions on the same element.

Example of using the box-shadow property to add multiple shadows to the element:

<!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 of the box-shadow property with the "inset" value:

<!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

One-edge shadow

If you want to get squeeze in a box shadow and push it off one side of a box use the negative spread radius value.

.shadow {
  box-shadow: 0 10px 8px -4px yellow;
}

Example of the box-shadow property with a negative spread radius value:

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .shadow {
      width:100px;
      height:100px;
      box-shadow: 0 10px 8px -4px yellow;
      background-color:#cccccc;
      }
    </style>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

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+


Do you find this helpful?

Related articles