CSS Box Shadow

The box-shadow property in CSS allows you to add shadows to various elements on a webpage. This property accepts several values, including the color of the shadow, its size, blur, and even spread.

Syntax

The syntax for box-shadow is as follows:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

• Horizontal offset: This specifies how far the shadow should be placed to the right of the element. A negative value will place the shadow to the left.
• Vertical offset: This specifies how far the shadow should be placed below the element. A negative value will place the shadow above.
• Blur radius: This determines the blur radius of the shadow. A greater value creates a more blurred shadow.
• Spread radius: This adds extra size to the shadow. A positive value increases the size, while a negative value decreases it. If this value is not set, the shadow will be the same size as the element.
• Color: This specifies the color of the shadow. This value can be any valid CSS color value, including named colors, RGB, and hexadecimal values.

Examples

Below are some examples of the box-shadow property in action.

.box {
  box-shadow: 2px 2px 5px 1px #ccc;
}

This will create a box with a shadow that is 2px to the right and 2px below the element. The shadow will also have a blur radius of 5px, a spread radius of 1px, and a color of #ccc.

.box {
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.2),
              2px 2px 5px rgba(0, 0, 0, 0.2);
}

This will create a box with a shadow that has two parts. The first part will be on the top and left side, 2px to the left and 2px above the element, with a blur radius of 5px and a color that is 20% black. The second part will be on the bottom and right side, 2px to the right and 2px below the element, with the same blur radius and color.

Conclusion

With the box-shadow property, you can easily add shadows to various elements on your webpage. By tweaking the values of the property, you can create shadows that are subtle, dramatic, or anything in between.