Is there a recommended limit to the number of shadows to apply to a single element?

TL;DR 

• When applying shadows to a single UI element, you can layer multiple shadows for added depth and complexity. 
• It is recommended to limit this to two layers: a core shadow and a cast shadow. 
• The core shadow provides immediate depth with its sharper, closer appearance. 
• The cast shadow is larger and more diffuse, enhancing the element's interaction with its environment. 
• This approach helps manage visual complexity without significantly impacting web application performance.

Detailed answer

The primary purpose of shadows in UI design is not to simulate 3D objects realistically, but to subtly guide and facilitate navigation within the interface. In UI design, you can indeed layer multiple shadows on a single element to create depth and complexity. However, there are practical considerations to keep in mind, particularly regarding performance. 

Limit each element to two shadow layers

While you can technically add as many shadows as you desire, a practical rule of thumb is to limit each element to two shadow layers – the core and cast layers. This approach helps manage the complexity without significantly impacting the performance of your application.

Core shadow: This shadow is typically closer to the element and sharper, defining the most immediate elevation from the background or adjacent elements. It provides essential depth and focus.

Cast shadow: This shadow is generally larger and more diffuse, simulating how the element might cast a shadow in a more natural, ambient light setting. It enhances the perception of the element’s interaction with its surroundings.

When it comes to creating a drop shadow, it is crucial to consider these two factors.

Consider this: Using more than two shadows per element can increase CPU usage, leading to slower load times and potentially degraded user experience on lower-powered devices. 

Related reading: How many shadow variations are typically needed for a good elevation system?

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Drop shadow tips by UX toast
• The Art of User Interface Drop Shadows by UX Movement