Introduction

The the box-shadow property takes several values to define the shadow's appearance, including:

1. offset-x: The horizontal offset of the shadow from the element. It can be a positive value (shadow on the right side) or a negative value (shadow on the left side).

2. offset-y: The vertical offset of the shadow from the element. It can be a positive value (shadow below the element) or a negative value (shadow above the element).

3. blur-radius: The blurring effect applied to the shadow. A higher value creates a more blurred shadow, while a value of 0 produces a sharp shadow.

4. spread-radius: The spread of the shadow, which expands or contracts the size of the shadow. A positive value increases the size of the shadow, while a negative value shrinks it.

5. color: The color of the shadow. It can be specified using a color name, a hex code, an RGB value, or any other valid CSS color format.

Here's an example that demonstrates the usage of box-shadow:

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

In this example, the <div> element will have a box shadow with a 2px horizontal offset, a 2px vertical offset, a blur radius of 4px, and a color specified as rgba(0, 0, 0, 0.2). The rgba() notation allows you to set the shadow's color with an alpha channel to control its transparency.

You can also use multiple box shadows on the same element by separating them with commas. Each box shadow is applied in the order they are specified.

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2),
              -2px -2px 4px rgba(255, 255, 255, 0.2);
}

In this example, the <div> element will have two box shadows: one with a positive offset (creating a shadow on the right and below) and another with a negative offset (creating a shadow on the left and above).