CSS box-shadow Property

❮ Prev Next ❯

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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

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>

Try it Yourself »

Result

Multiple shadows with box-shadow property

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>

Try it Yourself »

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>

Try it Yourself »

Values

Value	Description	Play it
none	No shadow is given.	Play it »
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.	Play it »
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.	Play it »
blur	Optional. The shadow is blurred. The higher the number, the more blurred the shadow will be.	Play it »
spread	Optional. The shadow is spread. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.	Play it »
inset	Optional. Turning the outset (outer shadow) into inset (inner shadow).	Play it »
color	Optional. The color of the shadow.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.