articles » current » css » box-shadow

CSS: Box Shadow

All about the box-shadow property

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.

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.