CSS box-shadow

CSS (CSS3) box-shadow property attaches one or more drop-shadows to the box.

CSS property box-shadow

CSS version: CSS 3
Value: [shadow-x] [shadow-y] [blur-radius] [optional_spread_distance] [color];
inset [shadow-x] [shadow-y] [blur-radius] [optional_spread_distance] [color];
Initial: none
Applies to: all elements

Few points to note:

  1. blur radius spread distance and color are optional.
  2. If the color is absent, the used color is taken from the ‘color’ property
  3. Positive value of shadow-x draws a shadow that is offset to the right of the box. Similarly a negative value to the left.
  4. A positive value of shadow-y offsets the shadow down, a negative one up.
  5. Negative values of blur-radius are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
  6. Spread distance: Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract.
  7. If present, the ‘inset’ keyword changes the drop shadow from an outer box-shadow to inner box-shadow.

Example – box-shadow

In the following code, CSS property box-shadow can be changed to the following values
  • 10px 10px gray
  • 10px 10px 10px gray
  • 10px 10px 10px 10px gray
  • 10px 10px
<style type="text/css">
div {
  width: 200px; height: 100px;
  background-color: lightblue;
  box-shadow: 10px 10px gray;
}
</style>
<div>some text</div>
box-shadow refresh

Example – inner box-shadow

In the following code, CSS property box-shadow can be changed to the following values
  • inset 10px 10px gray
  • inset 10px 10px 10px gray
  • inset 10px 10px 10px 10px gray
  • inset 10px 10px
<style type="text/css">
div {
  width: 200px; height: 100px;
  background-color: lightblue;
  box-shadow: inset 10px 10px gray;
}
</style>
<div>some text</div>
box-shadow refresh

Specification and Browser compatibility

SpecificationStatusCategories
CSS3 Box-shadowW3C Candidate RecommendationCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 10+ Yes 4+ Yes 9+ Yes 12+ Yes 5.1+ Yes 10.5+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 5.0-5.1+ Yes 10+ Yes 11+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments