15 CSS Box-Shadow property examples
You can use these beautiful CSS box-shadow examples in your work.
Examples of CSS box-shadow property, scroll down for CSS code.
#Example 1, Add CSS class .style1
#Example 2, Add CSS class .style2
#Example 3, Add CSS class .style3
#Example 4, Add CSS class .style4
#Example 5, Add CSS class .style5
.style1 {
box-shadow: -7px 0px 16px rgba(0, 0, 0, 0.25), -14px 4px 10px rgba(0, 0, 0, 0.22);
}
.style2 {
box-shadow: inset 0 0 5px #000000ad;
}
.style3 {
box-shadow: 0px -1px 5px -1px rgba(0, 0, 0, 0.75);
}
.style4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.style5 {
box-shadow: 10px 15px 2px lightgrey;
} #Example 6, Add CSS class .style6
#Example 7, Add CSS class .style7
#Example 8, Add CSS class .style8
#Example 9, Add CSS class .style9
#Example 10, Add CSS class .style10
.style6 {
box-shadow: inset 6px 1px 15px 5px lightgrey;
}
.style7 {
box-shadow: 0px -1px 4px 7px lightgrey;
}
.style8 {
box-shadow: 15px 20px 20px rgba(0, 0, 0, 0.25), inset 15px 13px 10px rgba(0, 0, 0, 0.22);
}
.style9 {
box-shadow: 0 0 4px 5px #00000082
}
.style10 {
box-shadow: inset -19px -19px 13px rgba(0, 0, 0, 0), 0px 20px 20px 10px rgba(0, 0, 0, 0.75);
} #Example 11, Add CSS class .style11
#Example 12, Add CSS class .style12
#Example 13, Add CSS class .style13
#Example 14, Add CSS class .style14
#Example 15, Add CSS class .style15
.style11 {
box-shadow: 0px 2px 20px 14px rgba(0, 0, 0, 0.75);
}
.style12 {
box-shadow: -20px 6px 12px 20px lightgrey;
}
.style13 {
box-shadow: 20px -10px 14px -1px rgba(0, 0, 0, 0.75);
}
.style14 {
box-shadow: -9px 7px 17px -1px rgba(0, 0, 0, 0.75);
}
.style15 {
box-shadow: 20px 16px 12px 20px lightgrey;
}