There are three ways to create the effect of depth: using lights, shadows, or both.
Let's see how we create box shadows for our containers.
The box-shadow CSS property creates one or several shadows on an element, and it looks like this:
box-shadow: 10px 10px 13px 5px rgba(0, 0, 0, .5) inset;
The box-shadow property supports three, four, five, or six values in the same declaration: four length values, one color value, and the keyword inset.
We use one of the following units when we use the length values: px, em, in, mm, cm, vw, and so on.
The four length values are as follows:
The first value is for the horizontal offset of the shadow. Negative values are valid. This value is required.
The second value is for the vertical offset of the shadow. Negative values are valid. This value is required.
The third value is for the blur radius of the shadow. The larger the value, the more spread the shadow becomes, but also more translucent. Negative values are...