CSS Box Shadow
CSS box-shadow Property
The CSS box-shadow property is used to apply
one or more shadows to an element.
In its simplest use, you can only specify the horizontal and the vertical offset of the shadow.
In addition, you can add a shadow color, a spread radius, a blur effect, and change the shadow from an outer shadow to an inner shadow (inset).
CSS Horizontal and Vertical Shadow
In its simplest use, you only specify the horizontal and the vertical offset of the shadow.
The default color of the shadow is the current text color.
Example
Specify a horizontal and a vertical shadow:
div
{
box-shadow: 10px 10px;
}
Try it Yourself »
Specify a Color for the Shadow
The color parameter defines the color of the
shadow.
Add a Blur Effect to the Shadow
The blur parameter defines the blur radius
of the shadow. The higher the number, the more
blurred the shadow will be.
Example
Add a blur effect to the shadow:
div
{
box-shadow: 10px 10px 5px lightblue;
}
Try it Yourself »
Set the Spread Radius of the Shadow
The spread parameter defines the spread radius
of the shadow.
A positive value increases the size of the shadow, and a negative value decreases the size of the shadow.
Example
Set the spread radius of the shadow:
div
{
box-shadow: 10px 10px 5px 12px lightblue;
}
Try it Yourself »
Set the inset Parameter
The inset parameter changes the shadow from
an outer shadow (outset) to an inner shadow (inside an element's frame).
Example
Add the inset parameter:
div
{
box-shadow: 10px 10px 5px lightblue inset;
}
Try it Yourself »
Add Multiple Shadows
An element can also have multiple shadows.
To attach more than one shadow to an element, add a comma-separated list of shadows.
Example
div
{
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
Try it Yourself »
Creating Shadow Cards
You can also use the
box-shadow property to create paper-like cards:
1
January 1, 2021
Hardanger, Norway
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;
}
Try it (Text Card) »
Try it (Image Card) »
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 |
