We can use box shadows to create a visual effect where an element appears to float above the background. This effect can create depth, highlight specific elements, and add visual interest to a webpage. To achieve it we can apply the box-shadow property.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x refers to the horizontal positioning of the shadow, with a positive value shifting the shadow to the right of the element and a negative value shifting it to the left;
• offset-y refers to the vertical positioning of the shadow, with a positive value shifting the shadow downwards and a negative value shifting it upwards;
• blur-radius sets the degree of blurring for the shadow and is an optional value, with a higher value producing a more blurred shadow;
• spread-radius is also optional, increases or decreases the size of the shadow based on its positive or negative value;
• color specifies the color of the shadow using any valid color format, and is also an optional value.

In addition to box-shadow, text-shadow and drop-shadow properties allow us to create shadows for text and other elements, respectively. They work the same way as the box-shadow property. However, these properties are used rarely in comparison with box-shadow.