This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
12.1.1 Box Shadow
The CSS box-shadow property applies shadow to elements. In its simplest use, you only specify the horizontal shadow and the vertical shadow:
This is a yellow <div> element with a black
box-shadow
Example 1: The box-shadow property
div {
box-shadow: 10px 10px;
}
Next, add a color to the shadow:
This is a yellow <div> element with a grey
box-shadow
Example 2: box-shadow with color
div {
box-shadow: 10px 10px grey;
}
Next, add a blur effect to the shadow:
This is a yellow <div> element
with a blurred grey box-shadow
Example 3: box-shadow with blur effect
div {
box-shadow: 10px 10px 5px grey;
}
Cards
You can also use the box-shadow property to create paper-like cards:
1
January 1, 2021
Hardanger, Norway
Example 4a: Using box-shadow to create paper-like cards | Example 4b: Using box-shadow to create polaroid images
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 |
|---|---|
| Adds one or more shadows to an element | |
| Adds one or more shadows to a text |