How to Add Box Shadow Using CSS

The box-shadow property allows you to add shadow effects around the element.

css

1box-shadow: <offset-x> <offset-y> <blur-radius?> <spread-radius?> <color?>;

The parameters marked with the question mark (?) are optional.

The first two parameters control the horizontal and vertical offsets of the shadow. Try to change the offset value and see what happens.

By default, the shadow is a solid box. You can add a blurring effect by specifying a blur radius.

css

1box-shadow: 10px 20px 10px;

Or adjusting the size of the shadow box by adding a fourth value.

css

1box-shadow: 10px 20px 10px 10px;

Optionally, you can change the color of the shadow with a color value.

css

1box-shadow: 10px 20px 10px red;