CSS Examples

How to Set a Box Shadow using CSS

In this example, we will see how to set a box shadow using CSS. We can use the box-shadow property to set the shadow to an element box.

Prerequisites

CSS box-shadow property
CSS height property
CSS width property

Example

HTML

<div class="box"></div>

CSS

.box {
            width: 200px;
            height: 100px;
            background-color: red;
            box-shadow: 5px 5px 10px black;
        }

Output

Here, we used width: 200px and height: 100px to create a rectangular box and filled it with red color using background-color: red.Then, we set the show to that box using box-shadow: 5px 5px 10px black. It creates a shadow 5px to the right, 5px to the bottom, 10px spread radius and black colored shadow

Conclusion

In this example, we learned how to set a box shadow using CSS. We used the box-shadow property to set the shadow to a box.