10/11/25, 8:02 AM CSS Box Shadow
Tutorials References Exercises Get Certified
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
CSS Box Shadow
❮ Previous Next ❯
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.
A <div> element with a box-shadow
Example
Specify a horizontal and a vertical shadow:
[Link] 1/8
10/11/25, 8:02 AM CSS Box Shadow
divbox-shadow:
{
Tutorials References
10px 10px;
Exercises Get Certified
}
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
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 of the shadow. The higher the number, the
more blurred the shadow will be.
A <div> element with a 5px blurred,
lightblue box-shadow
[Link] 2/8
10/11/25, 8:02 AM CSS Box Shadow
Tutorials
Example
References Exercises Get Certified
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
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.
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
[Link] 3/8
10/11/25, 8:02 AM CSS Box Shadow
The inset parameter changes the shadow from an outer shadow (outset) to an inner
Tutorials References
shadow (inside an element's frame).
Exercises Get Certified
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
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.
To attach more than one shadow to an element, add a comma-separated list of shadows.
A <div> element with multiple
shadows
Example
div {
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
Try it Yourself »
[Link] 4/8
10/11/25, 8:02 AM CSS Box Shadow
Tutorials References Exercises Get Certified
Creating Shadow Cards
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
You can also use the box-shadow property to create paper-like cards:
1
January 1, 2021 Hardanger, Norway
Example
[Link] {
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
[Link] 5/8
10/11/25, 8:02 AM CSS Box Shadow
box-shadow
Tutorials Adds oneor more
References shadows
Exercises to an element Get Certified
text-shadow Adds one or more shadows to a text
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
❮ Previous Next ❯
COLOR PICKER
REMOVE ADS
[Link] 6/8
10/11/25, 8:02 AM CSS Box Shadow
Tutorials References Exercises Get Certified
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
PLUS SPACES
GET CERTIFIED FOR TEACHERS
FOR BUSINESS CONTACT US
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
[Link] Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
[Link] Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
AngularJS Reference
jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
[Link] Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
[Link] 7/8
10/11/25, 8:02 AM CSS Box Shadow
Tutorials References Exercises Get Certified
HTML
CSS JAVASCRIPT SQL
PYTHON
JAVA
PHP HOW TO [Link] C
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full
correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and
privacy policy.
Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by [Link].
[Link] 8/8