Beautiful Shadow Examples
Do not fall for this:
username/email:
password:
welcome
1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
CSS Scan 0
2
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
CSS Scan 1
3
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
facebook shadow-2 2px
4
box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 2px rgb(0 0 0 / 8%);
Kajabi
5
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
CSS Scan 2
6
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
CSS Scan 3
7
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
CSS Scan 4
8
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
CSS Scan 5
9
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
CSS Scan 6
10
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
facebook shadow-2 12px
11
box-shadow: 0 2rem 4rem hsl(240deg 9.09091% 4.31373%);
CodePen user menu
12
box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
google search bar
13
box-shadow: rgba(255,100,80,0.6) 0 0 4px;
misc
14
box-shadow: 4px 4px 0 0 #000;
Elementor onboarding
15
box-shadow: 0 20px 20px -20px rgb(0 0 0 / 15%);
Calendly header
16
box-shadow: 0 0 0 1px #dddddd, 0 2px 4px 0 rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%);
rebase.co
17
box-shadow: 0 0 2px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%);
google maps search form2
18
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
google maps search form1
19
box-shadow: 21px 21px 42px #b14200, -21px -21px 42px #ff6000;
neumorphism.io
20
box-shadow: 0 4px 40px 4px rgb(0 0 0 / 8%);
kajabi announcement sidebar
21
box-shadow: 0 2px 0 #e6e6e6;
wp admin forminator
22
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
pinterest buttons
23
box-shadow: rgb(0 0 0 / 10%) 0px 8px 8px -8px;
pinterest header
24
box-shadow: 0 5px 25px rgb(0 0 0 / 15%);
wp forminator header
25
box-shadow: rgb(0 0 0 / 20%) 0px 10px 30px 0px;
zapier hover box
26
box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
google forms box
27
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
convas.io
28
box-shadow: 0 .25rem 1.875rem rgba(42,53,79,.05)!important;
qr.io
29
box-shadow: 0 0 3px rgba(4,4,52,.09), 0 4px 8px rgba(4,4,52,.05), 0 6px 12px rgba(4,4,52,.02);
mercury.com