The box-shadow CSS property helps you add shadow effects into elements for making elements more three dimensional and visually attractive.
With a simple syntax you can create a variety of shadow styles including subtle shadows to large, 3D-like, double layer shadows using values for vertical offsets, horizontal offsets, blur radius, spread radius, and color. Click on any card below to copy box-shadow CSS property to your clipboard.
Minimal
#01
Minimal
#02
Minimal
#03
Minimal
#04
Bootstrap 100
#05
Bootstrap 200
#06
Bootstrap 300
#07
Color
#08
Bold
#09
Bold
#10
Bold
#11
Bold
#12
Bold
#13
Bold
#14
Bold
#15
Bold
#16
Minimal
#17
Minimal
#18
Minimal
#19
Minimal
#20
Inset
#21
Inset
#22
Inset
#23
Inset
#24
Inset
#25
Inset
#26
Inset
#27
Inset
#28
Minimal
#29
Minimal
#30
Minimal
#31
Minimal
#32
Minimal
#33
Color
#34
Color
#35
Color
#36
Color
#37
Color
#38
Color
#39
Tailwind 100
#40
Tailwind 200
#41
Tailwind 300
#42
Tailwind 400
#43
MDB 100
#44
MDB 200
#45
MDB 300
#46MDB 400
#47UIKit
#48
UIKit
#49
UIKit
#50
UIKit
#51
Minimals
#52
Minimals
#53
Minimals
#54
Minimals
#55
Minimals
#56
Minimals
#57
Minimals
#58
Minimals
#59
Figma 100
#60
Figma 200
#61
Figma 300
#62
Figma 400
#63
Shadow 100
#64
Shadow 200
#65
Shadow 300
#66
Shadow 400
#67
Shadow 500
#68
Shadow 600
#69
Shadow 700
#70
Shadow 800
#71
Layer
#72
Layer
#73