CSS Box Shadow Samples

Elevate your web design game with our collection of CSS box shadow samples. From subtle shadows to eye-catching effects, copy and paste our code snippets to enhance your website's visual appeal.

1
box-shadow: rgba(150, 158, 166, 0.2) 0px 9px 25px;
2
box-shadow: rgba(100, 100, 112, 0.2) 0px 8px 30px 0px;
3
box-shadow: rgba(0, 0, 0, 0.16) 1.96px 1.96px 2.7px;
4
box-shadow: rgba(0, 0, 0, 0.36) 0px 6px 16px;
5
box-shadow: rgba(0, 0, 0, 0.17) 0px 2px 5px;
6
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 9px;
7
box-shadow: rgba(100, 100, 100, 0.2) 0px 2px 9px 0px;
8
box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 3px 0px, rgba(27, 31, 35, 0.16) 0px 0px 0px 1px;
9
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 13px;
10
box-shadow: rgba(0, 0, 0, 0.25) 0px 55px 56px, rgba(0, 0, 0, 0.12) 0px -13px 31px, rgba(0, 0, 0, 0.12) 0px 4px 7px, rgba(0, 0, 0, 0.18) 0px 12px 14px, rgba(0, 0, 0, 0.08) 0px -3px 6px;
11
box-shadow: rgba(0, 0, 0, 0.06) 0px 7px 25px 0px, rgba(0, 0, 0, 0.09) 0px 0px 0px 1px;
12
box-shadow: rgba(0, 0, 0, 0.17) 0px 10px 37px 0px, rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
13
box-shadow: rgba(17, 12, 46, 0.16) 0px 50px 102px 0px;
14
box-shadow: rgba(50, 50, 94, 0.26) 0px 50px 102px -19px, rgba(0, 0, 0, 0.3) 0px 31px 62px -30px, rgba(10, 37, 64, 0.36) 0px -2px 7px 0px inset;
15
box-shadow: rgba(256, 255, 256, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 94, 0.26) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -32px;
16
box-shadow: rgba(50, 50, 93, 0.26) 0px 50px 102px -21px, rgba(0, 0, 0, 0.4) 0px 30px 62px -31px;
17
box-shadow: rgba(50, 50, 93, 0.26) 0px 50px 100px -21px, rgba(0, 0, 0, 0.4) 0px 31px 60px -31px;
18
box-shadow: rgba(50, 50, 93, 0.26) 0px 13px 28px -5px, rgba(0, 0, 0, 0.4) 0px 8px 17px -9px;
19
box-shadow: rgba(50, 50, 93, 0.26) 0px 2px 6px -1px, rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
20
box-shadow: rgb(38, 57, 78) 0px 21px 31px -10px;
21
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.68) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 0px 0px inset;
22
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -3px, rgba(0, 0, 0, 0.4) 0px 3px 7px -4px;
23
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -6px, rgba(0, 0, 0, 0.4) 0px 8px 16px -9px;
24
box-shadow: rgba(52, 50, 93, 0.25) 0px 30px 60px -13px, rgba(0, 0, 0, 0.3) 0px 19px 36px -19px;
25
box-shadow: rgba(50, 50, 93, 0.28) 0px 32px 60px -12px inset, rgba(0, 0, 0, 0.4) 0px 19px 36px -19px inset;
26
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -22px, rgba(0, 0, 0, 0.3) 0px 32px 60px -32px;
27
box-shadow: rgba(0, 0, 0, 0.14) 0px 1px 3px, rgba(0, 0, 0, 0.28) 0px 1px 2px;
28
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 6px, rgba(0, 0, 0, 0.22) 0px 2px 8px;

DevTools99

Developer Co-Team

Let us make it easier for developers throughout the world to breathe. Let's keep things simple. Let's take it easy.