CSS: Box Shadow

This article is about adding shadows to HTML elements using CSS.

The box-shadow property accepts between three and six values and then they can repeat. Valid values for this property are vh, vw, em, rem, px but not percentages (%).

Basic Box Shadows

An example of three values is 8px 5px black (click on the values). As can be seen, this creates a very hard-edged shadow that is shifted 8 pixels to the right and 5 pixels down. Negative values are valid to make the shadow appear above and to the left of the box, for example: -8px -5px black. The values can make the shadow paint far from beneath the box, for example: 25px 50px black. But a hard-edged shadow is not very realistic so it can be blurred by specifying a fourth value, for example: 8px 5px 8px black. Now that is looking much more like a shadow! By just specifying the blur value one can make a shadow that surrounds the box, for example: 0 0 15px black. The spread of the blur can be increased by specifying a fifth value: 0 0 15px 40px black. The color can be changed by changing the last value here, for example: 0 0 15px 0 red. rgba() as well as hex color values also work. Finally, the sixth parameter is inset which makes the shadow paint on the inside of the box: inset 3px 3px 10px 0 navy.

Compound Box Shadows

A neat thing that it is possible to have is multiple box shadows. Just seperate the groups of values by a comma, for example: 10px 10px 5px red, 20px 20px 5px blue or 0 0 0 10px red, 0 0 0 20px blue. There is no limit to how many box shadows that can be inserted just remember to seperate them by a comma. inset can also be used.

Lifted Corners

It is possible to have a corner appear to be lifted off the document. See this article for details.

Comment