How to make a shadow CSS

Learn how to create a shadow effect with CSS using an example code.

Shadow in CSS

The CSS box-shadow property can be used to add a shadow around an HTML element. The box-shadow property requires you to set the horizontal offset, vertical offset, blur radius, spread radius, and color of the shadow.

For example, the following code will add a drop shadow with a 10px horizontal offset, 5px vertical offset, 10px blur radius, 0px spread radius, and black color:

box-shadow: 10px 5px 10px 0px black;

You can also add multiple shadows by separating each shadow with a comma. For example, the following code will add two shadows to the element, one with a 10px horizontal offset, 5px vertical offset, 10px blur radius, 0px spread radius, and black color, and the other with a 0px horizontal offset, 15px vertical offset, 20px blur radius, 0px spread radius, and gray color:

box-shadow: 10px 5px 10px 0px black, 0px 15px 20px 0px gray;

You can also add an inset shadow by adding the inset keyword before the shadow color. For example, the following code will add an inset shadow with a 10px horizontal offset, 5px vertical offset, 10px blur radius, 0px spread radius, and black color:

box-shadow: inset 10px 5px 10px 0px black;

Finally, you can add a spread radius to the shadow to make it appear larger or smaller. For example, the following code will add a drop shadow with a 10px horizontal offset, 5px vertical offset, 10px blur radius, 5px spread radius, and black color:

box-shadow: 10px 5px 10px 5px black;

As you can see, the box-shadow property is a powerful tool for adding shadows to HTML elements. You can combine multiple shadows, add inset shadows, and adjust the spread radius to get the desired effect.