The **`box-shadow` property** is used to create a shadow effect around an HTML element.

The `box-shadow` property can have the values below. These values define the shadow's characteristics:

|  **value** | **description**|
| ---------- | ------|
| h-offset| The horizontal offset of a shadow. A positive value creates a shadow on the right, and a negative value creates a shadow on the left.|
| v-offset | A positive vertical offset creates a shadow below the box, and a negative offset creates one above the box. |
|blur|The blur radius of the shadow.   |  
|spread    | The size of the shadow.   | 
|color     | The color of the shadow. |   
|inset | Changes the shadow from an outer shadow to an inner shadow. |

# Syntax 

These values take the following order in the syntax:
```html
box-shadow: h-offset v-offset blur spread color inset;
```
# Code


#example1 {
    border: 1px solid;
    box-shadow: 5px 10px;
}
#example2 {
    border: 1px solid;
    box-shadow: 5px 10px 5px;
}
#example3 {
    border: 1px solid;
    box-shadow: 5px 10px 5px 8px;
}
#example4 {
    border: 1px solid;
    box-shadow: 5px 10px 7px 3px #790670;
}
#example5 {
    border: 1px solid;
    box-shadow: -5px -10px 7px 2px #709090 inset;
}
#example6 {
    border: 1px solid;
    box-shadow: 5px 5px blue, 10px 10px green, 15px 15px purple;
}

<html>
 <head>
 </head>
 <body>
    <div id="example1">
        <h3> Box shadow made using v-offset and h-offset only.</h3>
    </div>
    <br><br>
    <div id="example2">
        <h3> Using blur makes a shadow like this.</h3>
    </div>
    <br><br>
    <div id="example3">
        <h3> Spread controls the size of the shadow.</h3>
    </div>
    <br><br>
    <div id="example4">
        <h3> Shadows can also be colored.</h3>
    </div>
    <br><br>
    <div id="example5">
        <h3> This shadow is made an inset shadow.</h3>
    </div>
    <br><br>
    <div id="example6">
        <h3> Multiple shadows can be applied to an element as well.</h3>
    </div>
 </body>
</html>

codemirror

What is the CSS box-shadow property?

Get the Learn to Code Starter Pack

The box-shadow property is used to create a shadow effect around an HTML element.


value	description
h-offset	The horizontal offset of a shadow. A positive value creates a shadow on the right, and a negative value creates a shadow on the left.
v-offset	A positive vertical offset creates a shadow below the box, and a negative offset creates one above the box.
blur	The blur radius of the shadow.
spread	The size of the shadow.
color	The color of the shadow.
inset	Changes the shadow from an outer shadow to an inner shadow.