When most people use box shadows, they use a shadow with three length parameters and a color value–usually a color in rgba or red, green, blue, and alphpa (the alpha channel being the opacity of the color). An example is something like the following:
The goal here is to achieve a more realistic box-shadow effect. In order to create a shadow that would, in theory, have a light source coming from a singular point, the shadow would need to only exist on one side of the box. For instance, the bottom of the box.
In order to accomplish this goal, we have to first understand the properties of CSS's box-shadow rule. The box-shadow rule accepts four length parameters and a color. The order of these is:
When creating a box-shadow on one side only, we have to focus on the last value, the spread radius. The spread radius decreases the overall size of the box-shadow both horizontally and vertically. If you were to have a spread radius of -4px, the box's shadow would be reduced by 8 pixel–4 pixels horizontally and 4 pixels vertically. So, with this in mind, if we apply a negative spread radius whose absolute value is equal to the value of the blur radius, we would get a box shadow that is the exact same dimension as the element it is applied to. Therefore, if we apply a positive value to the elements vertical offset, we would get a shadow at the bottom of our box.
The goal here is to achieve a shadow on two adjacent sides of the box. In order to do this, we can either apply the basic shadow like in the first example on this page or we can do this with a slight variation to the box-shadow on one side as shown above.
For this effect, we don't want to shrink the shadow to account for blurring on both sides, but only one of the sides. Therefore, the spread radius will not have an opposite value as the blur radius, but will have half of that. The shadow will also need to be moved both vertically and horizontally, so both their values will need to be greater or equal to half of the blur radius as we want to make sure the shadow is hidden on the other two sides.