CSS box-shadow Property
The box-shadow property allows you to add multiple shadows around an element by specifying values for horizontal offset, vertical offset, blur radius, spread radius, color, and the inset keyword.
The box-shadow property is one of the CSS3 properties.
You can add effects separated by commas. If you specify a border-radius on the element with a box shadow, the box shadow will take the same rounded corners.
These are two values that set the shadow offset. H-offset specifies the horizontal distance. Positive values place the shadow to the right of the element. Negative values place it to the left. V-offset specifies the vertical distance. A positive value places the shadow below the element, while a negative value places it above. If both values are 0, the shadow appears directly behind the element.
The third value is the blur radius. It is optional. The higher the number, the larger and lighter the blur becomes. Negative values are invalid. If omitted or set to 0, the shadow's edge is sharp.
The fourth value is the spread radius. It is optional. Positive values cause the shadow to expand, and negative values cause it to shrink. If omitted or set to 0, the shadow is the same size as the element.
The fifth value is color. It is optional. If omitted, the shadow defaults to the element's computed text color.
The sixth value is the inset keyword. It is optional and can be placed anywhere in the shadow definition. When present, it creates an inner shadow instead of a drop shadow.
| Initial Value | none |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. The shadow of the box is animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.boxShadow = "15px 25px 35px gray"; |
Syntax
Syntax of CSS box-shadow Property
box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;Let’s try to add shadows to an element.
Example of the box-shadow property:
Example of CSS box-shadow Property
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: 5px 4px 10px #1c87c9;
}
</style>
</head>
<body>
<h2>Box-shadow example</h2>
<div></div>
</body>
</html>Result
Multiple shadows
You have the opportunity to comma separate the box-shadow for many times. For example, using the code below will show 3 shadows with multiple colors and positions on the same element.
Example of using the box-shadow property to add multiple shadows to the element:
Example of CSS box-shadow Property with multiple values
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
height: 100px;
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
}
</style>
</head>
<body>
<h2>Multiple shadows with box-shadow.</h2>
<div></div>
</body>
</html>Result
Now let’s give the element an inset value. It adds shadow inside the box.
Example of the box-shadow property with the "inset" value:
Example of CSS box-shadow Property with inset value
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
}
</style>
</head>
<body>
<h2>Box-shadow with inset value</h2>
<div></div>
</body>
</html>Result
One-edge shadow
To create a shadow that appears only on one side of a box, use a negative spread radius value.
CSS box-shadow Property
.shadow {
box-shadow: 0 10px 8px -4px yellow;
}Example of the box-shadow property with a negative spread radius value:
Example of the box-shadow property
<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
width: 100px;
height: 100px;
box-shadow: 0 10px 8px -4px yellow;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| none | No shadow is given. | Play it » |
| h-offset | Required. The horizontal offset of the shadow. A positive value gives the shadow on the right side of the box, a negative value gives the shadow on the left side of the box. | Play it » |
| v-offset | Required. The vertical offset of the shadow. A positive value gives the shadow below the box, a negative value gives the shadow above the box. | Play it » |
| blur-radius | Optional. The shadow is blurred. The higher the number, the more blurred the shadow will be. Negative values are invalid. | Play it » |
| spread-radius | Optional. The shadow is spread. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. | Play it » |
| color | Optional. The color of the shadow. If omitted, it defaults to the element's text color. | Play it » |
| inset | Optional. An optional keyword that can be placed anywhere in the shadow definition. It turns an outer shadow into an inner shadow. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
What properties can be adjusted when defining a box-shadow in CSS?