box-shadow

Description »

This generates a shadow effect around or within a box element.

Browser Compatibility
IE FF GC S O

Possible Values »

  • box-shadow: h-tran v-tran;
  • Sets the horizontal and vertical translations of the shadow, respectively.
  • box-shadow: h-tran v-tran blur;
  • Sets the horizontal and vertical translations of the shadow, respectively. Also applies a blur for blur pixels.
  • box-shadow: h-tran v-tran color;
  • Sets the horizontal and vertical translations of the shadow as well as its color.
  • box-shadow: h-tran v-tran blur color;
  • Sets the horizontal and vertical translations, the blur distance, and color of the shadow.
  • box-shadow: h-tran v-tran blur spread;
  • Sets the horizontal and vertical translations, the blur distance, and the spread distance (the size of the shadow).
  • box-shadow: h-tran v-tran blur spread color;
  • Sets the horizontal and vertical translations, the blur distance, the spread distance, and the color of the shadow.
  • box-shadow: (any of the above) inset;
  • Places the shadow within the element rather than outside.
  • box-shadow: none;
  • Removes any shadow effect from the element.

Details »

The box-shadow property transforms an element's shadow(s). Using the above syntax combinations, the following attributes of the shadow can be applied:

  • h-tran: Set the horizontal translation of the shadow. Negative values move the shadow to the left.
  • v-tran: Set the vertical translation of the shadow. Negative values move the shadow up.
  • blur: By default, the shadow looks like another box. This value allows the shadow to be blurred on the edges for blur pixels. The larger the value, the more blur is applied.
  • spread: By default, the shadow is the same shape and size as the element. This value increases the shadow's size for positive values and decreases the size for negative values.
  • color: The shadow is black (#000) by default.
  • inset: If this is added, then the shadow will appear inside the element rather than outside.

Multiple shadows can be applied to a single element using commas to separate individual instances of the above syntaxes. For example:

  • box-shadow: 10px 10px #F00, -10px -10px #00F;

Note: Abusing the use of the box-shadow property may cause significant lag on individual pages.

In Practice »

Results CSS
Try it! at The CSS Zone Sandbox
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License