CSS box-shadow (Box Shadow)
The box-shadow property in CSS is used to add shadows to HTML elements, giving them depth and a 3D-like effect. It’s a versatile property that can create soft glows, floating cards, or inner shadows.
Basic Shadow
At its simplest, a shadow only needs horizontal and vertical offsets:
<div>This is a box with shadow</div>
div {
width: 200px;
height: 100px;
margin: 50px auto;
background-color: #fff;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
font-weight: bold;
box-shadow: 8px 8px; /* Basic shadow */
}
Output :
Shadow Color
You can specify the color of the shadow to match your design:
<div>This is a box with colored shadow</div>
div {
width: 250px;
height: 100px;
margin: 50px auto;
background-color: #fff;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
font-weight: bold;
box-shadow: 8px 8px yellow; /* Shadow with color */
}
Output :
Blur Effect
The blur radius softens the shadow edges. Higher numbers make the shadow more blurred:
<div class="box">Blur Shadow</div>
.box {
width: 250px;
padding: 20px;
margin: 50px auto;
background: #fff;
text-align: center;
border: 1px solid #ddd;
box-shadow: 10px 10px 5px lightblue; /* Blur effect */
font-weight: bold;
}
Output :
Spread Radius
The spread determines how big or small the shadow is:
<div class="box">Spread Shadow</div>
.box {
width: 250px;
padding: 20px;
margin: 50px auto;
background: #fff;
text-align: center;
border: 1px solid #ddd;
box-shadow: 10px 10px 5px 12px lightblue; /* Spread radius */
font-weight: bold;
}
Output :
Inset Shadow
By default, shadows are outside the element. Use inset to make them inside the element frame:
<div class="box">Inset Shadow</div>
.box {
width: 250px;
padding: 20px;
margin: 50px auto;
background: #fff;
text-align: center;
border: 1px solid #ddd;
box-shadow: 10px 10px 5px lightblue inset; /* Inset shadow */
font-weight: bold;
}
Output :
Multiple Shadows
You can apply more than one shadow by separating them with commas:
<div class="box">Multiple Shadows</div>
.box {
width: 250px;
padding: 20px;
margin: 50px auto;
background: #fff;
text-align: center;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green; /* Multiple shadows */
font-weight: bold;
}
Output :
Shadow Cards
Box shadows are perfect for creating card-style layouts with depth:
<div class="card">Shadow Card</div>
.card {
width: 200px;
padding: 20px;
margin: 50px auto;
background: #fff;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19); /* Card shadow */
font-weight: bold;
}
Output :
