CSS Box Shadow Examples

100+ Ready-to-use Styles

Click on any shadow card to copy the CSS style to your clipboard.

1
Tiny
2
Small
3
Medium
4
Large
5
Extra Large
6
2XL
7
Soft Bottom
8
Soft Large Bottom
9
Subtle Top
10
Subtle Top & Bottom
11
Outline
12
Outline & Shadow
13
Hard Edged
14
Hard Edged Gray
15
Distant
16
Super Distant
17
Smudge Bottom Right
18
Smudge Top Left
19
Neumorphic Inset
20
Neumorphic Outset
21
Soft Neumorphic
22
Blue Glow
23
Red Glow
24
Green Glow
25
Purple Glow
26
Yellow Glow
27
Intense Blue Glow
28
Subtle Blue
29
Subtle Red
30
Subtle Green
31
Subtle Purple
32
Layered 1
33
Layered 2
34
Layered 3
35
Bottom Heavy
36
Right Heavy
37
Top Heavy
38
Left Heavy
39
Floating
40
High Floating
41
Inner Shadow
42
Inner Shadow Deep
43
Inner Top
44
Inner Bottom
45
Inner Left
46
Inner Right
47
Spread Out
48
Spread Out More
49
Fuzzy
50
Super Fuzzy
51
Two Tone 1
52
Two Tone 2
53
Three Tone
54
Jagged Edge
55
Jagged Edge Color
56
Opposing Sides
57
Opposing Corners
58
Curled Paper
59
Lifted Corner
60
Solid Blue
61
Solid Red
62
Solid Green
63
Solid Purple
64
Offset Solid
65
Subtle Inset Top
66
Subtle Inset Bottom
67
Ring
68
Double Ring
69
Triple Ring
70
Thin Bottom Border
71
Thick Bottom Border
72
Thin Top Border
73
Thick Top Border
74
Horizontal Borders
75
Vertical Borders
76
All Borders
77
Sketchy 1
78
Sketchy 2
79
Gradient Blue
80
Gradient Red
81
Gradient Green
82
Text Shadow Soft
83
Text Shadow Hard
84
Text Shadow Outline
85
Text Shadow Glow
86
Slight Blur
87
Medium Blur
88
Heavy Blur
89
Thin Left
90
Thin Right
91
Side Glow Left
92
Side Glow Right
93
Side Glow Both
94
Drop Shadow Right Bottom
95
Drop Shadow Left Top
96
Photo Frame
97
Comic Book
98
Pressed
99
Double Inset
100
Angled
101
Reverse Angled
102
Bottom Smear
103
Left Smear
104
Radial Blue
105
Radial Red

These are built-in CSS box shadow examples. If you want to create a custom shadow effect, you can also use our free tool to generate your specific CSS box shadow. Box Shadow Generator

The Ultimate Guide to CSS Box Shadows

The `box-shadow` property is one of the most versatile and powerful tools in a web designer's arsenal. It allows you to add depth, dimension, and emphasis to elements, transforming a flat layout into a dynamic, engaging user interface. From subtle lifts that make elements float off the page to dramatic glows and creative, hard-edged borders, mastering box shadows is key to modern web design.

In This Guide, You'll Discover:


Understanding the `box-shadow` Property

At its core, the `box-shadow` property applies one or more shadows to an element's box. The syntax can seem complex at first, but it's incredibly logical. A single shadow is defined by its X and Y offsets, an optional blur and spread, and a color...