CSS Box Shadow

CSS box-shadow is a property that allows you to add a shadow effect to an element's box (including its border and padding, but not its margin). It's commonly used for creating visual depth and dimensionality in web design. The box-shadow property accepts several values to control the appearance of the shadow:

Horizontal offset (required):

Specifies the horizontal distance of the shadow from the element. Positive values move the shadow to the right, while negative values move it to the left.

Vertical offset (required):

Specifies the vertical distance of the shadow from the element. Positive values move the shadow downwards, while negative values move it upwards.

  div {
  box-shadow: 12px 12px;
}  

Color (optional)

Specifies the color of the shadow. This can be any valid CSS color value, such as a color keyword, hexadecimal, RGB, RGBA, HSL, or HSLA value.

  div {
  box-shadow: 12px 12px pink;
}  

Blur radius (optional)

Specifies the amount of blurring applied to the shadow. Higher values result in a more diffused and softer shadow appearance. A value of 0 means no blur.

  div {
  box-shadow: 12px 12px 5px pink;
}  

Spread radius (optional)

Specifies the size of the shadow. Positive values increase the size of the shadow, while negative values decrease it. If omitted, the shadow will be the same size as the element's box.

  div {
  box-shadow: 12px 12px 5px 12px pink;
}  

Cards

You can also use the box-shadow property to create paper-like cards:

#card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

#header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}

#container {
  padding: 10px;
} 

Example

Specify a horizontal and a vertical shadow:

#polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

#container {
  padding: 10px;
} 

---

.

Output

Hardanger, Norway