Beautiful CSS box-shadow examples

All of these box-shadow examples can be copied with a simple click! Use the shadows for your own projects or explore our resources to learn more about CSS techniques.

📌 Press ⌘+D to bookmark this page

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

#23

#24

#25

#26

#27

#28

#29

#30

#31

#32

#33

#34

#35

#36

#37

#38

#39

#40

#41

#42

#43

#44

#45

#46

#47

#48

#49

#50

#51

#52

#53

#54

#55

#56

#57

#58

#59

#60

#61

#62

#63

#64

#65

#66

#67

#68

#69

#70

#71

#72

#73

#74

#75

#76

#77

#78

#79

#80

#81

#82

#83

#84

#85

#86

#87

#88

#89

#90

#91

#92

#93

#94

#95

#96

#97

#98

#99

#100

About Box Shadows in CSS

It is important to note that CSS box shadows are an excellent way to enhance the “layered” effect of an element and screen. Shadow overlays improve the look of the interface or make it more “active”. The box-shadow property permits to add further shadows to an element with peculiar offset, blur and spread radius and color.

Understanding the Box Shadow Syntax

The box-shadow property is defined with the following syntax:

Last but not the least is the color of the shadow: box-shadow-color: color (any CSS color: background-color: rgbValue, rgbaValue, hexValue, etc.).

Offset X: How much to the left or right is the shadow cast. Positive values are used to shift the shadow to the right side while negative values to the left side.
Offset Y: Way up or down is the shadow? Positive values mean shadow going lower while negative values going higher.
Blur Radius: Amount of the shadow which is blurred. Higher value means a shadow that has been stretched more, while for 0 a crisp shadow.
Spread Radius: This value increases or decreases the shadow. A positive value means making the shadow more or farther out.
Color: Shadow has a color managed in any CSS formatting, example color.css or in rgb reasonable level or any hex.

Basic Examples of Box Shadows

1. Simple Shadow

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

In this example, a self-shadow produces at a distance of 2 pixels on the right side and at a distance of 2 pixels at the bottom while having a blurring distance of 5 pixels and soft black of 30% opacity.

2. Inset Shadow

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);

Incorporating the inset keyword instead changes the shadow from an outer shadow effect to an inner shadow effect making the outer layer look different.

3. Multiple Shadows

box-shadow: 2px 2px 5px rgba(255, 0, 0, 0.3), 2px 2px 5px rgba(0, 0, 0, 0.1);

To use more than one shadow, you add a comma to do so. In this case, the example creates 2 shadows, one toward the bottom right and the second one toward the top left. This in turn adds to the strength of the shadow.

Special methods

Shadows Color and Shadows Opacity

box-shadow: 0 4px 10px rgba(0,0,0,0.5);

One advantage of using rgba is that you get to even determine how opaque the shadow will be. This is useful especially if need to make shadow effects that are thin and light on the whether it is a text or images in a background.

Shadow on Hover

.box {
  transition: box-shadow 0.3s ease;
}
.box:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

You can further enhance the user interactivity of web pages by changing shadow on hover to create dynamic effects.

Conclusion

CSS box shadows are handy tools in helping to make the interfaces of web sites that you are designing more attractive. Playing around with shadow properties will definitely result in more interesting UI. Don’t hesitate to mix shadows with other CSS properties for even greater results!