Where are shadows most effectively used in design?

TL;DR

Shadows are most effectively used in design to improve visual hierarchy and indicate functionality, particularly on elevated cards, buttons (including Floating Action Buttons and regular buttons in hover states), and various types of menus (like dialogs, dropdowns, and navigation bars). These shadows create depth and focus, making interfaces more intuitive and engaging by clearly distinguishing interactive elements from the rest of the design.

Detailed answer

Shadows are most effectively used in design to improve visual hierarchy, indicate functionality, and suggest interactivity and depth. Here are some elements where shadows are commonly applied:

Elevated cards 

Shadows on cards, such as in Material Design, suggest elevation and separate them from the background, making the content more digestible and the layout more dynamic. This is especially helpful in dashboards or content-heavy platforms where different sections need to be clearly separated visually.

An example of the elevated card with a shadow.

An example of the elevated card with a small shadow.

Buttons 

For both Floating Action Buttons (FABs) and regular buttons, especially in a hover state, shadows indicate interactivity. The changing shadow depth on hover also reinforces user interaction, enhancing the feeling of engagement with the interface.

Examples of the shadows implemented on FABs.

Related reading: Is it a good idea to use shadows on buttons?

Menus 

Whether it's a dialog, dropdown menu, drawer, bottom sheet, or navigation bars, shadows create a layered effect. They distinguish these elements from other components on the screen, focusing user attention on the menu content and aiding in navigation. This is particularly important in complex interfaces where multiple interactions occur simultaneously.

An example of the menu with a shadow.

Related reading: When is it better to avoid shadows?

🤝 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!

Material design 3

start your project with us.

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