Box-shadow

In this chapter we will learn about CSS box-shadow property.

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

The box-shadow property is used to create one or more drop shadows for the box. To add shadows more than one, we seperate them with comma and create seperated list of shadows.

If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.

When we use box-shadow property we need to use -moz- and -webkit- prefixes for Mozilla and Webkit.

CSS Syntax

box-shadow: none | h-shadow v-shadow blur spread color | inset | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
<head>
   <style> 
       div {
            width: 150px;
            height: 50px;
            background-color: orange;
            box-shadow: 5px 4px 10px darkblue;
           -moz-box-shadow:    5px 4px 10px darkblue;
           -webkit-box-shadow:  5px 4px 10px darkblue;
      }
   </style>
</head>
<body>

    <div></div>

</body>
</html>

Here is the result:




Let's see some other examples:

Example 2:

You can see colourful and more than one shadows below:

<!DOCTYPE html>
<html>
<head>
   <style> 
       div {
           width: 150px;
           height: 50px;
           background-color: orange;
           box-shadow:
                  0 0 20px black,
                  20px 15px 30px red,
                 -20px 15px 30px green,
                 -20px -15px 30px blue,
                  20px -15px 30px yellow;
           -moz-box-shadow:    
                  0 0 20px black,
                  20px 15px 30px red,
                 -20px 15px 30px green,
                 -20px -15px 30px blue,
                  20px -15px 30px yellow;
           -webkit-box-shadow: 
                  0 0 20px black,
                  20px 15px 30px red,
                 -20px 15px 30px green,
                 -20px -15px 30px blue,
                  20px -15px 30px yellow;
       }
   </style>
</head>
<body>

<div></div>

</body>
</html>

Here is the result:




Example 3:

You can see an example to inset shadow:

<!DOCTYPE html>
<html>
<head>
   <style> 
       div {
           width: 150px;
           height: 50px;
           background-color: orange;
           box-shadow: inset 4px 4px 7px black, 4px 4px 7px black;
           -moz-box-shadow:    inset 4px 4px 7px black, 4px 4px 7px black;
           -webkit-box-shadow: inset 4px 4px 7px black, 4px 4px 7px black;
     }
   </style>
</head>
<body>

<div></div>

</body>
</html>

Here is the result:




Property Values

Value Descriptions
none It means that there won't be any shadow shown. It is the default value of this property.
h-shadow It creates horizontal shadows and it is required. Negative values are allowed.
v-shadow It creates vertical shadows and it is required. Negative values are allowed.
blur It sets the blur distance. It is optional.
spread It sets the size of shadow. It is optional.
inset It changes the shadow to an inner shadow from the outer one. It is optional.
color It sets the shadow's color. It is optional and its default value is black.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.