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.

Note

To find the best suited shadow visit the source shadow generator.

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.