CSS box-shadow

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

CSS property box-shadow

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

<style type="text/css">
div {
  width: 200px; height: 100px;
  background-color: lightblue;
  box-shadow: 10px 10px gray;
}
</style>
<div>some text</div>

Example – inner box-shadow

<style type="text/css">
div {
  width: 200px; height: 100px;
  background-color: lightblue;
  box-shadow: inset 10px 10px gray;
}
</style>
<div>some text</div>

Specification and Browser compatibility