Box Shadow
CSS box-shadow Property
An element can have one or more shadows applied to it using the CSS box-shadow property.
Specify a Horizontal and a Vertical Shadow
You just supply a horizontal and a vertical shadow when using it in its most basic form. The current text color is the shadow’s default color.
Example
Specify a horizontal and a vertical shadow:
div {
box-shadow: 10px 10px;
}
Specify a Color for the Shadow
The shadow’s color is specified via the color parameter.
Example
Specify a color for the shadow:
div {
box-shadow: 10px 10px lightblue;
}
Add a Blur Effect to the Shadow
The blur radius is specified by the blur option. The shadow will be more hazy the higher the number.
Example
Add a blur effect to the shadow:
div {
box-shadow: 10px 10px 5px lightblue;
}
Set the Spread Radius of the Shadow
The spread radius is specified by the spread parameter. The size of the shadow increases with a positive value and reduces with a negative value.
Example
Set the spread radius of the shadow:
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
Set the inset Parameter
The shadow is transformed from an outside (outset) to an interior shadow via the inset parameter.
Example
Add the inset parameter:
div {
box-shadow: 10px 10px 5px lightblue inset;
}
Add Multiple Shadows
Moreover, an element may have more than one shadow:
Example
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Cards
The box-shadow feature can also be used to make cards that resemble paper:
Example
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
| Property | Description |
|---|---|
| box-shadow | Adds one or more shadows to an element |
| text-shadow | Adds one or more shadows to a text |
