box-shadow

Is used to assign one or more shadows to an element.

Compatibility

-webkit-box-shadow iOS 4+ Blackberry 7+
box-shadow Firefox 4+ Safari 5.1+, Chrome 10+ Internet Exlorer 9+ Opera 11+ Android 4+ IE Mobile 10+

Not supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5.1+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 4+Android 4+Blackberry 7+IE Mobile 10+

General description

Multiple shadows can be assinged comma separated.

box-shadow: 1 inset 2 4px 3 4px 4 16px 5 10px 6 #000

  1. Optional. When set the shadow is drawn inside the element and will be no drop shadow. When both the offset values are positive the shadow runs from top left to bottom right. When negative it starts at the bottom right corner (not depicted).
  2. The horizontal offset of the shadow (x-axis). If positive the shadow is drawn to the right side of the element, if negative it is drawn to the left side.
  3. The vertical offset of the shadow (y-axis). If positive the shadow is drawn below the element, if negative it is drawn above.
  4. Optional. The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. Negative values are not allowed. If not set the shadows edges are sharp (which corresponds to a value of 0).
  5. Optional. The spread distance makes the shadow bigger in all directions. The shadow is expanded by the given value. Negative values cause the shadow to contract (not depicted).
  6. The color of the shadow. rgba/hsla color values are possible.

Examples

Expanded shadow to the left

box-shadow: 1 -5px 2 5px 3 15px 4 7px 5 #000

  1. Horizontally the shadow gets drawn to the left side (minus value).
  2. Vertical offset. As it is positive the shadow gets drawn downwards.
  3. The blur radius.
  4. The spread distance.
  5. A black shadow.

Inset shadow

box-shadow: 1 inset 2 6px 3 6px 4 12px 5 #000

1 The shadow is inset. 2 Horizontal offset. 3 Vertical offset. 4 The blur radius. 5 A black shadow.

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).

text-shadow

Is used to assign one or more shadows to text.

Compatibility

text-shadow Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 10+ Opera 11+ iOS 3.2+ Android 2.1+ Opera Mini 5+ Blackberry 10+ IE Mobile 10+

Not supported by Internet Explorer prior to version 10, only partly supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 10+Opera 11+
iOS 3.2+Android 2.1+Opera Mini 5+Blackberry 10+IE Mobile 10+

General description

Multiple shadows can be assinged comma separated.

text-shadow: 1 4px 2 4px 3 14px 4 #969696

  1. The horizontal offset of the shadow (x-axis). If positive the shadow is drawn to the right side of the text, if negative it is drawn to the left side.
  2. The vertical offset of the shadow (y-axis). If positive the shadow is below the text, if negative it is drawn above.
  3. Optional. The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. Negative values are not allowed. If not set the shadows edges are sharp (which corresponds to a value of 0).
  4. The color of the shadow. rgba/hsla color values are possible.

Example

Shadow above and to the left

text-shadow: 1 -5px 2 -5px 3 12px 4 #969696

  1. Horizontally the shadow gets drawn to the left side (minus value).
  2. Vertically the shadow gets drawn top (minus value).
  3. The blur radius.
  4. A grey shadow.

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).