Creating overly strong, heavily blurred shadows that muddy UI appearance and distract from content, when subtle shadows (low opacity, moderate blur) create professional depth without visual noise, as excessive shadow intensity can overwhelm designs and reduce readability or visual clarity in user interfaces.
Mismatching shadow direction across components, using shadows that indicate different light sources on different elements, creating inconsistent visual appearance, when aligned shadow direction (consistent light source assumption) creates cohesive design where shadows follow same lighting convention across all elements.
Relying on box-shadow for element outlines or borders when border property should be used, as box-shadow is optimized for depth effects, not structural boundaries, and using box-shadow for outlines can cause performance issues or visual inconsistencies when borders are more appropriate for element definition.
Applying too many layered shadows (more than 2-3 layers) causing performance degradation, as each shadow layer adds rendering cost, and excessive layers can cause browser performance issues, paint delays, or animation jank, especially when applied to many elements or animated frequently.
Using fixed pixel units for shadows on components that scale responsively, causing shadows to appear disproportionate at different screen sizes, when relative units (em, rem) or percentage-based approaches maintain appropriate shadow proportions across responsive breakpoints and component scale variations.
Not considering shadow appearance in dark mode contexts, assuming shadows work identically in light and dark themes, when shadow visibility and contrast differ significantly between light and dark backgrounds, requiring shadow value adjustments or opacity changes for optimal appearance in both theme contexts.
Creating shadows that interfere with focus indicators or accessibility features, when shadows should complement accessibility rather than obscure focus outlines, requiring careful shadow design that maintains focus indicator visibility and doesn't reduce accessibility contrast or usability.
Animating large, heavily blurred shadows causing performance issues and animation jank, as animating complex shadows triggers expensive repaints, when small shadow transitions for hover/focus states work better, and avoiding animation of large blur values prevents performance problems and smooth user experience.
Not maintaining shadow consistency across similar components, using different shadow patterns for cards, panels, or containers without design rationale, when consistent shadow application creates visual harmony and professional appearance, requiring standardized shadow tokens or values for similar component types.
Ignoring shadow performance impact in mobile or low-performance contexts, assuming all devices handle complex shadows equally, when mobile devices or slower hardware may struggle with multiple shadow layers or complex shadow effects, requiring performance-conscious shadow design for optimal cross-device experience.
Using box-shadow colors that reduce contrast or accessibility, when shadow colors should enhance rather than interfere with content readability, requiring shadow color choices that maintain sufficient contrast and don't create accessibility issues, especially when shadows interact with text or interactive elements.
Not exporting shadow values as design system tokens, keeping shadow values scattered in component code instead of centralized tokens, when tokenized shadows ensure consistency, enable global changes, and maintain design system integrity across all shadow-based elevation and depth effects throughout application.