Shadows are added to a box by using the box-shadow property. It is non- inherited and allows one or more shadows to be applied to the edges of an element’s box. If border-radius is also specified, the comers of the shadows are rounded. Table 10.16 lists the value types that are supported.
The values are specified in the following order:
<offset-x> <offset-y> <blur-radius> <spread-radius> <color>
The set of values can be specified multiple times, separated with commas. Each set specifies the settings for a shadow, and the first two values must be the x- and y-offset. The inset keyword may be added to the front of a rule to specify shadow type. Where there is more than one shadow, the shadow specified first is placed on top. Figure 10.63 shows how the box-shadow property is used, using different values, and Figure 10.64 shows the rendered results.
In the example, the p.one{} rule specifies the x-y offsets as 5px 5px, a blur-radius of 5px, spread radius of Opx, and a shadow color of #4d4d4d. Rules p.one_up{}, p.one_blur {}, and p.one_center_no_blur {} follow the same pattern. The p.one_center{} and p.multi{} rules have the inset keyword to specify an inner shadow. The p.multi{} rule also shows how multiple shadows are specified, as well as uses em unit instead of px. Notice that they are separated by a comma and that the inset keyword is only at the start of the rule, not at the start of every shadow setting.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.