CSS Box-Shadow Examples

Developers use CSS to style the HTML documents. CSS describes how HTML pages should be visible over the screen. It saves a lot of time, as it can control layouts of multiple web pages at once. Using CSS, we can change and apply the color, font, box-shadow to the element. Some CSS properties are crucial for providing a good user experience and interaction, and box-shadow is one. So this blog will cover some exciting CSS box-shadow examples that you will be going to love.

Before looking at the examples, let’s first discuss what CSS box-shadow is.

What is box-shadow?

The box-shadow is the CSS property that adds the shadow effect around the HTML element. It is described by color, horizontal offset, vertical offset, blur, and spread radius. Multiple box-shadow effects can be set separated by commas.

Syntax:

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

1. Color:   It specifies the shadow color. The default color of the shadow is the text color.

2. Horizontal-offset:   Horizontal-offset or offset-x specifies the horizontal distance. If the value of the offset-x is positive, the shadow will be to the right of the box, and if the value is negative, then the shadow will be to the left of the box.

3. Vertical-offset:  Vertical-offset or offset-y specifies the vertical distance. If the value of the offset-y is positive, the shadow will be to the bottom of the box, and if the value is negative, then the shadow will be to the top of the box.

4. Blur radius:  The larger the blur radius value larger the blur, and the shadow becomes lighter and brighter. The negative values are not accepted. If not specified, the value is 0.

5. Spread radius:  It specifies how much the shadow should spread or not. The positive values increase the spread and make the shadow grow bigger, while the negative value makes the shadow shrink.

6. Inset: If the inset keyword is not specified the shadow is assumed to be drop shadow. And if specified the shadow changes to the one side of the frame.

Now let’s move to the ready to use, click to copy CSS box-shadow examples.

CSS Box-Shadow Examples:

1. Box-shadow example 1:

box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;

2. Box-shadow example 2:

box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
          

3. Box-shadow example 3:

box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

4. Box-shadow example 4:

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

5. Box-shadow example 5:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

6. Box-shadow example 6:

box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

7. Box-shadow example 7:

box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

8. Box-shadow example 8:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

9. Box-shadow example 9:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

10. Box-shadow example 10:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

11. Box-shadow example 11:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

12. Box-shadow example 12:

box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

13. Box-shadow example 13:

box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;

14. Box-shadow example 14:

box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;

15. Box-shadow example 15:

box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Conclusion

Hopefully, you understood what CSS box-shadow is and loved all the box-shadow examples. So now it’s your turn, list out all the CSS box-shadow styles you use in the comment section below.

Happy Coding!