70+ CSS Box Shadow Examples

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

#46

MDB 400

#47

UIKit

#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