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.
Open demo in new tabBy 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;