CSS shadow properties—box-shadow and text-shadow—add visual elevation, depth, and glow effects to element containers and text content.
Shadow declarations accept horizontal offset, vertical offset, blur radius, spread radius, and color:
/* Box Shadow Syntax: x-offset | y-offset | blur-radius | spread-radius | color */
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
/* Inset Box Shadow (Inner shadow) */
.input-inset {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Text Shadow Syntax: x-offset | y-offset | blur-radius | color */
.headline-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
Shadow parameters explained:
x): Positive values shift shadow right; negative shifts left.y): Positive values shift shadow down; negative shifts up.rgba(0, 0, 0, 0.3) creates realistic natural shadows.flowchart TD
A["UI Elevation Levels"] --> B["Low Elevation (box-shadow: 0 1px 3px rgba(0,0,0,0.2))"]
A --> C["Medium Elevation (box-shadow: 0 10px 15px rgba(0,0,0,0.3))"]
A --> D["High Elevation Modal (box-shadow: 0 25px 50px rgba(0,0,0,0.5))"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Shadows Demonstration</title>
<style>
.elevated-card {
background-color: #1e293b;
padding: 2rem;
border-radius: 12px;
max-width: 450px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.elevated-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<div class="elevated-card">
<h3 style="color: #38bdf8; margin-top: 0;">Elevated Card Surface</h3>
<p>Using multi-layered <code>box-shadow</code> declarations creates realistic Material UI elevation depth.</p>
</div>
</body>
</html>
#000000) hard shadows; use rgba(0, 0, 0, 0.2) to create soft natural drop shadows.Create a CSS class .card-glow applying box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.