box-shadow
Description »This generates a shadow effect around or within a box element. |
|
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 |