This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

box-shadow

Summary

The box-shadow property programmatically creates one or more shadows on the inside or outside of a block level element.

Overview table

Initial value
none
Applies to
All elements
Inherited
No
Media
visual
Computed value
any length made absolute; any specified color computed; otherwise as specified
Animatable
Yes
CSS Object Model Property
boxShadow
Percentages
n/a

Syntax

  • box-shadow: blur-radius (optional)
  • box-shadow: inset (optional)
  • box-shadow: offset-x (optional)
  • box-shadow: offset-x offset-y blur-radius color, offset-x offset-y blur-radius color
  • box-shadow: offset-y (optional)
  • box-shadow: spread-distance (optional)

Values

inset (optional)
If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
offset-x (optional)
The first length is the horizontal offset of the shadow — offset-x specifies the horizontal offset of the shadow, which can be a number of any length unit. Positive values place the shadow to the right of the element, and negative values to the left. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.
offset-y (optional)
The second length is the vertical offset of the shadow — offset-y specifies the vertical offset of the shadow, which can be a number of any length unit. Positive values place the shadow below the element, and negative values above. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.
blur-radius (optional)
The third length is a blur radius, which can be a number of any length unit. The larger this value, the bigger the blur, meaning the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it defaults to 0 (the shadow’s edge is sharp).
spread-distance (optional)
The fourth length is a spread distance, which again can be a number of any unit. Positive values cause the shadow to expand and grow bigger, negative values cause the shadow to shrink. If not specified, it defaults to 0 (the shadow is the same size as the element). Note that setting the size of an outer shadow to 0 causes it to disappear, whereas a 0-sized inner shadow covers the entire padding-box. For inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape.
offset-x offset-y blur-radius color, offset-x offset-y blur-radius color
To apply multiple shadows to one element, write the box-shadow values out one after another, separated by commas.

Examples

An example of a basic drop shadow. An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

article {
/* box-shadow: left-offset top-offset blur color; */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

View live example

An example of inner drop shadows. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.

article {
/* box-shadow: left-offset top-offset blur color; */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
}

View live example

An example of how a positive spread distance length value affects the drop shadow. If a spread distance is defined, the shadow is expanded outward or contracted inward.

article {
/* box-shadow: left-offset top-offset blur spread color; */
   box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.5);
}

View live example

Negative values cause the shadow shape to contract.

article {
/* box-shadow: left-offset top-offset blur spread color; */
   box-shadow: 0 20px 5px -10px rgba(0, 0, 0, 0.5);
}

View live example

If the blur value is zero, the shadow’s edge is sharp. (A non-zero blur value indicates the resulting shadow should be blurred, such as by a Gaussian filter.)

article {
/* box-shadow: left-offset top-offset blur spread color; */
   box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
}

View live example

If the box has a nonzero ‘border-radius’, the shadow shape is rounded in the same way. (The ‘border-image’ does not affect the shape of the box-shadow.)

article {
/* box-shadow: left-offset top-offset blur color; */
   box-shadow: 0 0 10px rgba(0, 0, 0, 1);
   border-radius: 10px;
}

View live example

An example of a multiple box-shadows. The inner shadow appears on all four sides by creating two box-shadows.

<style>
    .shadow-style {
        width: 100px;
        height: 100px;
        box-shadow: inset 30px 30px 5px green, inset -30px -30px 5px blue;
        border: 10px solid yellow;
        background-color: red;
    }
</style>
<body>
    <div class="shadow-style">
    </div>
</body>

View live example

Usage

 ===Remarks===

See also:

Related specifications

CSS Level 3 - Backgrounds and Borders Module
Candidate Recommendation

See also

Related articles

CSS Layout

Box Model