How to use Multiple Box Shadows in CSS

Hello Buddies.
We are going to talk about How to use Multiple Box Shadows in CSS in this detailed article. This tutorial goes into details on the usage of multiple box shadows in CSS.

So, let's get started.

Syntax

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

How to add Box Shadow

It's a simple and quick way to add a box shadow in any html element. As you can see, there are five parameters allowed to manage shadow appearance, color and where to show the inner side or outer side.

div {
    width: 250x;
    height: 250px;
    background-color: #2e8a30;
    box-shadow: 10px 10px 5px #abd7e5 inset; // inset optional
}

How to add Multiple Shadows

Adding multiple box shadows on a single HTML element is really simple and easy. You can add as many shadows as you want with comma separated values just like mentioned below. You can generate multiple box shadows quickly and easily by adjusting your values.

div {
    width: 250x;
    height: 250px;
    background-color: #2e8a30;
    box-shadow: 10px 10px 5px #abd7e5 inset, 10px 10px 5px #fafafa, 10px 10px 5px #000000; // and so on with comma separated
}

Conclusion

It's very easy to use Multiple Box Shadows on a single HTML element. You need to add comma-separated values to add multiple shadows. You can make box shadows around the HTML element with multiple shadows.