CSS box-shadow Property

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!

Share this: