box-shadow

< css‎ | properties
Jump to: navigation, search

box-shadow

This article is Almost Ready.


W3C Recommendation

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

Syntax

  • !important: declaration
  • -ms-flex-pack: center
  • -ms-flex-pack: end
  • -ms-flex-pack: justify
  • -ms-flex-pack: start
  • align-content: center
  • align-content: flex-end
  • align-content: flex-start
  • align-content: space-around
  • align-content: space-between
  • align-content: stretch
  • align-items: baseline
  • align-items: center
  • align-items: flex-end
  • align-items: flex-start
  • align-items: stretch
  • align-self: auto
  • align-self: baseline
  • align-self: center
  • align-self: flex-end
  • align-self: flext-start
  • align-self: stretch
  • alignment-adjust: <length>
  • alignment-adjust: <percentage>
  • alignment-adjust: after-edge
  • alignment-adjust: alphabetic
  • alignment-adjust: auto
  • alignment-adjust: baseline
  • alignment-adjust: before-edge
  • alignment-adjust: central
  • alignment-adjust: hanging
  • alignment-adjust: ideographic
  • alignment-adjust: mathematical
  • alignment-adjust: middle
  • alignment-adjust: text-after-edge
  • alignment-adjust: text-before-edge
  • all-space-treatment: collapse
  • all-space-treatment: preserve
  • animation-delay: <time>
  • animation-direction: alternate
  • animation-direction: alternate-reverse
  • animation-direction: normal
  • animation-direction: reverse
  • animation-duration: <time>
  • animation-fill-mode: backwards
  • animation-fill-mode: both
  • animation-fill-mode: forwards
  • animation-fill-mode: none
  • animation-iteration-count: <single-animation-iteration-count>
  • animation-iteration-count: infinite
  • ... further results


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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
10.0
Yes
1.0
prefix
?
Unknown
9.0
Yes
10.5
Yes
5.1
Yes
3.0
prefix
Multiple shadows
10.0
Yes
1.0
prefix
?
Unknown
9.0
Yes
10.5
Yes
5.1
Yes
3.0
prefix
inset keyword
10.0
Yes
4.0
prefix
?
Unknown
9.0
Yes
10.5
Yes
5.1
Yes
5.0
prefix
Spread radius
10.0
Yes
4.0
prefix
?
Unknown
9.0
Yes
10.5
Yes
5.1
Yes
5.0
prefix

Mobile

FeaturesAndroid BrowserOpera MiniOpera MobileiOS Safari
Basic support
?
Partial support (almost)
?
Unknown
?
Yes
5.0
Yes
?
prefix
Multiple shadows
?
Unknown
?
Unknown
?
Unknown
5.0
Yes
?
prefix
inset keyword
?
Unknown
?
Unknown
?
Unknown
5.0
Yes
?
prefix
Spread radius
?
Unknown
?
Unknown
?
Unknown
5.0
Yes
?
prefix


Examples

View live exampleAn 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.

CSS

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

View live exampleAn 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.

CSS

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

View live exampleAn 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.

CSS

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

View live exampleNegative values cause the shadow shape to contract.

CSS

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

View live exampleIf 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.)

CSS

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

View live exampleIf 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.)

CSS

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

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

HTML

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

Usage

Remarks

See also:


Related specifications

Specification Status Related Changes
CSS Backgrounds and Borders Module Level 3 Editor's Draft tests, animatable value, omitted color default value, spread distance behavior
CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 10.0
1.0 -webkit
13.0
4.0 -moz
9.0
10.5
5.1
3.0 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 4.0
2.1 -webkit
10.0
7.0 -webkit
?
?
?
Unsupported
?
5.0-5.1
3.2 -webkit

The given value was not understood.

Compatibility notes

Browser Version Note
IE 9.0 In order to get box-shadow in IE9 or later, you need to set border-collapse to separate. Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3).
Chrome 10.0 Basic support in 1.0 with -webkit prefix, inset and spread radius in 4.0 with -webkit prefix.
Firefox (Gecko) 4.0 (2.0) Since Firefox 13 (Gecko 13), -moz-box-shadow prefix was dropped and only the unprefixed version is supported.

See also

Related articles

The given value was not understood.

CSS Layout












  • box-shadow











The given value was not understood.

Box Model





  • box-shadow

















The given value was not understood.