
The CSS box-shadow property applies one or more shadows to an element.
Demo:
Syntax:
box-shadow: none|h-offset v-offset blur spread color |inset;
none (default) – no shadow is applied.
h-offset (required) – the horizontal offset of the shadow.
v-offset (required) – the vertical offset of the shadow.
blur (optional) – the blur radius.
spread (optional) – the spread radius.
color (optional) – the colour of the shadow (the default value is the text colour).
inset (optional) – changes the shadow from an outer shadow (outset) to an inner shadow.
Example1:
Add a blur effect to the shadow (the optional third value adds a blur effect to the shadow):
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid #333;
padding: 10px;
box-shadow: 5px 5px 10px gray;
}
</style>
</head>
<body>
<div id="example1">
<p>box-shadow: 5px 5px 10px gray;</p>
</div>
</body>
</html>
Output:
box-shadow: 5px 5px 10px gray;
Example2:
Specify multiple shadows:
<!DOCTYPE html>
<html>
<head>
<style>
#example2 {
border: 1px solid #333;
padding: 10px;
box-shadow: 5px 5px red, 10px 10px green, 15px 15px blue;
}
</style>
</head>
<body>
<div id="example2">
<p>box-shadow: 5px 5px red, 10px 10px green, 15px 15px blue;</p>
</div>
</body>
</html>
Output:
box-shadow: 5px 5px red, 10px 10px green, 15px 15px blue;
Example3:
Add the inset keyword:
<!DOCTYPE html>
<html>
<head>
<style>
#example3 {
border: 1px solid #333;
padding: 10px;
box-shadow: 5px 10px yellow inset;
}
</style>
</head>
<body>
<div id="example3">
<p>box-shadow: 5px 10px yellow inset;</p>
</div>
</body>
</html>
Output:
box-shadow: 5px 10px yellow inset;
Example4:
Add the shadow to an image:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {border: 10px solid #e5e5e5;
box-shadow: 0px 0px 15px rgba(0,0,0,0.7), 5px 5px 15px rgba(0,0,0,0.5);}
</style>
</head>
<body>
<div><img src="https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg"></div>
</body>
</html>
Output:

Enjoy coding!
Read also: