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


  • 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.

Two cards with text; one has a core and cast shadow, giving it a hyper-realistic look.


 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.

A ball visualizing different types of shadows, including cast shadow and core shadows, along with highlight, reflected highlight, and mid-tone.


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

The visualization of the combination of the core shadow and cast shadow that creates a natural shadow.


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!

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent