🎚️ Flat Design is Out, Depth is In
Box shadow adds depth. Elevation levels communicate hierarchy. Cards hover higher, modals highest. Better UX.
📝 Shadow Syntax
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.1);
/* Multiple shadows (layered) */
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
/* Inset shadow (inner) */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
/* Elevation levels */
.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12); }
.elevation-4 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }
.elevation-8 { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); }
🎯 Interactive Shadows
/* Hover effect */
.card {
transition: box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
/* Focus state */
button:focus {
box-shadow: 0 0 0 3px rgba(66,153,225,0.5);
}
/* Neumorphism (soft UI) */
.neumorph {
background: #e0e0e0;
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
💡 Performance Note
- Use blur-radius sparingly (large blurs are expensive)
- Animate transform, opacity, not box-shadow (expensive)
- Use will-change: transform for animated shadows
- Multiple shadows increase rendering cost
“Flat design felt cheap. Added box shadows for depth. Cards now look elevated, buttons feel clickable. Shadows improve UX perception.”