CSS Box Shadow Examples

100+ Ready-to-use Box Shadows effect

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

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

  • The Anatomy of `box-shadow`: Learn the syntax and understand each value: horizontal offset, vertical offset, blur radius, spread radius, color, and the `inset` keyword.
  • Creating Depth & Elevation: See how to layer multiple shadows to create realistic depth, making elements feel closer or further away from the user.
  • Creative Effects with Shadows: Explore advanced techniques like colored glows, neumorphic (soft UI) effects, hard-edged borders, and two-tone styles.
  • Performance and Best Practices: Get practical tips on how to use box shadows effectively without impacting your site's performance, and how to apply them for maximum design impact.

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...

Frontend Hack

© Copyright 2025 all rights reserved | Design By Frontend-Hack