Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Shadows (box-shadow & text-shadow)
Shadows add depth and visual hierarchy to your designs. box-shadow creates elevation effects on cards and buttons, while text-shadow adds subtle depth to headings. Mastering shadows is key to creating modern, professional UI designs.
Shadow Properties
- box-shadow: x y blur spread color - x/y = offset, blur = softness, spread = size, color = shadow color
- box-shadow: 0 4px 12px rgba(0,0,0,0.1) - Subtle card elevation. The go-to shadow for modern cards
- box-shadow: 0 2px 4px rgba(0,0,0,0.06) - Extra subtle, barely visible. Good for input fields
- box-shadow: 0 20px 40px rgba(0,0,0,0.2) - Large, dramatic shadow. Good for modals and overlays
- box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) - Inset shadow (inside the element). Creates pressed/recessed look
- text-shadow: 1px 1px 2px rgba(0,0,0,0.3) - Subtle text depth. Use sparingly for headings only
- Multiple shadows - Combine with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.06)
Shadow Examples
/* Elevation system - like Material Design */
.elevation-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Subtle */
}
.elevation-2 {
box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Card */
}
.elevation-3 {
box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* Dropdown */
}
.elevation-4 {
box-shadow: 0 16px 48px rgba(0,0,0,0.2); /* Modal */
}
/* Card with hover shadow transition */
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
/* Colored shadow (modern glass effect) */
.btn-glow {
background: #667eea;
box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}
/* Text shadow on headings */
.hero-title {
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}Try It Yourself: Shadow Gallery
Tip
Create a shadow elevation system with 4 levels: subtle (cards at rest), medium (hover state), large (dropdowns/popovers), and dramatic (modals). Reuse these consistently across your project for a polished, professional look.
Every element follows the box model - content + padding + border + margin
Common Mistake
Making shadows too dark or too large. Use rgba(0,0,0,0.08) to rgba(0,0,0,0.15) for subtle, professional shadows. Pure black shadows (rgba(0,0,0,0.5)+) look harsh and unnatural. The best shadows are barely noticeable but add clear depth.
Practice Task
In the shadow gallery editor above: (1) Modify the .s1 box-shadow to have a colored shadow using rgba(102, 126, 234, 0.3). (2) Add a new shadow card with box-shadow: 0 0 20px rgba(228, 77, 38, 0.4) for a warm glow effect. (3) Try combining two shadows with a comma.
Quick Quiz
Key Takeaways
- Shadows add depth and visual hierarchy to your designs.
- box-shadow: x y blur spread color - x/y = offset, blur = softness, spread = size, color = shadow color
- box-shadow: 0 4px 12px rgba(0,0,0,0.1) - Subtle card elevation. The go-to shadow for modern cards
- box-shadow: 0 2px 4px rgba(0,0,0,0.06) - Extra subtle, barely visible. Good for input fields