CSS: Box Shadow
This article is about adding shadows to HTML elements using CSS.
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.
It is possible to have a corner appear to be lifted off the document. See this article for details.