CSS box-shadow Property
One or more shadows can be attached to an element through the CSS box-shadow property.
Only a horizontal and a vertical offset are strictly necessary.
On top of those, you may choose a color, set a spread radius, add blur, or turn the outer shadow into an inner one (inset).
CSS Horizontal and Vertical Shadow
Two offsets, one horizontal and one vertical, are enough for a basic shadow.
Leave out the color and the shadow takes the current text color.
Example
A shadow defined only by its two offsets:
Prompt
Create a page with a div element that has a box-shadow with 10px horizontal and 10px vertical offset, no blur, no spread, using the default shadow color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal and Vertical Shadow</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px</h1>
<div>A div element with a box-shadow</div>
</body>
</html>
Specify a Color for the Shadow
Adding a color parameter decides what color the shadow has.
Example
The shadow now has its own color:
Prompt
Create a page with a div element that has a box-shadow with 10px horizontal offset, 10px vertical offset, and a lightblue shadow color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Color</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px lightblue</h1>
<div>A div element with a lightblue box-shadow</div>
</body>
</html>
Add a Blur Effect to the Shadow
Softness is controlled by the blur parameter, which gives the shadow's blur radius. Bigger numbers produce a more blurred shadow.
Example
The shadow's edges are softened here:
Prompt
Create a page with a div element that has a box-shadow with 10px horizontal offset, 10px vertical offset, 5px blur radius, and a lightblue shadow color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px lightblue</h1>
<div>A div element with a 5px blurred, lightblue box-shadow</div>
</body>
</html>
Set the Spread Radius of the Shadow
How far the shadow spreads comes from the spread parameter, its spread radius.
Positive values make the shadow bigger; negative values make it smaller.
Example
The shadow grows by a spread radius here:
Prompt
Create a page with a div element that has a box-shadow with 10px horizontal offset, 10px vertical offset, 5px blur radius, 12px spread radius, and a lightblue shadow color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spread Radius</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px 12px lightblue</h1>
<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px</div>
</body>
</html>
Set the inset Parameter
By default a shadow is outer (outset). With the inset parameter it moves inside the element's frame and becomes an inner shadow.
Example
The same shadow, now with inset:
Prompt
Create a page with a div element that has an inset box-shadow with 10px horizontal offset, 10px vertical offset, 5px blur, and lightblue color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Shadow</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px lightblue inset</h1>
<div>A div element with a blurred, lightblue, inset box-shadow</div>
</body>
</html>
Add Multiple Shadows
A single element is not limited to one shadow.
List as many as you need, separating them with commas.
Example
Prompt
Create a page with a div element that has multiple box shadows: 5px 5px 8px blue, 10px 10px 8px red, and 15px 15px 8px green.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div>A div element with multiple shadows</div>
</body>
</html>
Creating Shadow Cards
Paper-like cards are another thing box-shadow can produce.
Text card
Text content sits inside this card, lifted by a subtle shadow:
Prompt
Create a page with a card-style div (250px wide, centered text) using box-shadow with values "0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)". Include a heading "1", a date "January 1, 2021", and a location "Hardanger, Norway".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Card - Text</title>
<style>
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;
}
div.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h1>Shadow Cards</h1>
<div class="card">
<div class="container">
<h1>1</h1>
<p>January 1, 2021</p>
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>
Image card
This card holds an image above its text content:
Prompt
Create a page with a card-style div (250px wide, centered text) using box-shadow with values "0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)". Include a placeholder image at the top and a paragraph with "John Doe" heading and some descriptive text below it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Card - Image</title>
<style>
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;
}
div.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h1>Shadow Cards</h1>
<div class="card">
<img src="img_avatar.png" alt="John" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</body>
</html>