CSS Box Shadow
Posted: Fri Oct 27, 2023 8:24 am
CSS Box Shadow
CSS box-shadow Property
The CSS box-shadow property is used to apply
one or more shadows to an element.
Specify a Horizontal and a Vertical Shadow
In its simplest use, you only specify a horizontal and a vertical shadow. The
default color of the shadow is the current text-color.
A <div> element with a box-shadow
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.
A <div> element with a lightblue box-shadow
Example
Specify a color for the shadow:
div
{
box-shadow: 10px 10px lightblue;
}
Try it Yourself »
Add a Blur Effect to the Shadow
The blur parameter defines the blur radius. The higher the number, the more
blurred the shadow will be.
A <div> element with a 5px blurred, lightblue box-shadow
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. A positive value increases
the size of the shadow, a negative value decreases the size of the shadow.
A <div> element with a blurred, lightblue box-shadow, with
a spread radius of 12px
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.
A <div> element with a blurred, lightblue, inset box-shadow
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:
Example
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Try it Yourself »
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) »
Test Yourself With Exercises
Exercise:
Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.
<style>
h1 {
: 2px 2px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
Submit Answer »
Start the Exercise
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
★
+1
Reference: https://www.w3schools.com/css/css3_shadows_box.asp
CSS box-shadow Property
The CSS box-shadow property is used to apply
one or more shadows to an element.
Specify a Horizontal and a Vertical Shadow
In its simplest use, you only specify a horizontal and a vertical shadow. The
default color of the shadow is the current text-color.
A <div> element with a box-shadow
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.
A <div> element with a lightblue box-shadow
Example
Specify a color for the shadow:
div
{
box-shadow: 10px 10px lightblue;
}
Try it Yourself »
Add a Blur Effect to the Shadow
The blur parameter defines the blur radius. The higher the number, the more
blurred the shadow will be.
A <div> element with a 5px blurred, lightblue box-shadow
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. A positive value increases
the size of the shadow, a negative value decreases the size of the shadow.
A <div> element with a blurred, lightblue box-shadow, with
a spread radius of 12px
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.
A <div> element with a blurred, lightblue, inset box-shadow
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:
Example
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Try it Yourself »
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) »
Test Yourself With Exercises
Exercise:
Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.
<style>
h1 {
: 2px 2px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
Submit Answer »
Start the Exercise
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
★
+1
Reference: https://www.w3schools.com/css/css3_shadows_box.asp