box-shadow

Definition

The box-shadow property in CSS is used to add shadow effects around an element’s frame. It can be used to create multiple effects, like depth or emphasis. The box-shadow property can take several values: horizontal offset, vertical offset, optional blur radius, optional spread radius, and color.

Example of How to Use box-shadow

Here’s an example of how to use the box-shadow property:

  <style>
    .my-box {
      width: 200px;
      background-color: lightblue;
      box-shadow: 10px 10px 5px gray;
      padding: 20px;
    }
  </style>

    <div class="my-box">This box has a shadow.</div>

In this example, the div with the class .my-box will display a shadow that is offset 10 pixels to the right (horizontal) and 10 pixels down (vertical), with a blur radius of 5 pixels and a gray color.