When is it better to avoid shadows?

TL;DR 

• Avoid using shadows on text elements to prevent readability and accessibility issues, as shadows can blur text edges making them difficult to read. 
• Avoid adding shadows to small decorative elements like dividers to avoid visual overload and maintain a clean design.
• For closely positioned elements, such as a series of cards, omit shadows to prevent a cluttered visual design and use alternative methods like spacing or borders for clear separation.

Detailed answer

Misusing shadows can happen when they’re too strong, inconsistent, or don’t have a clear purpose. Imagine a user interface where every element has a heavy shadow, making it look like a digital paper cutout on a flat background. This overuse of shadows can distract users and make it hard for them to focus on important content or actions.

Source

It is indeed better to avoid using shadows in certain situations. Here are specific cases where shadows should be avoided:

Text elements 

Applying shadows to text can lead to readability issues and create accessibility challenges. Shadows can blur the distinct edges of text characters, making them harder to read, particularly for those with visual impairments. Keeping text clean and shadow-free ensures that it remains legible and accessible to all users.

There are no shadows in this interface, yet it’s clear that the text on the left screen is hard to read.

Source 

Small decorative elements 

Small components like dividers are typically used to subtly separate content. Adding shadows to these elements can introduce unnecessary visual complexity, making the design feel overdone. It's best to keep such decorative elements simple and unobtrusive to maintain a clean and professional look.

Elements positioned closely together

In designs where elements such as cards are positioned closely together, using shadows on each can result in a cluttered and messy appearance. Multiple shadows can merge into each other, reducing the visual clarity and effectiveness of the separation intended by shadows. In such cases, use other methods, such as spacing or borders, to define distinctions between elements without overwhelming the design.

Source

How to use shadows correctly

Be consistent 

Make sure you use shadows the same way throughout your design. This will help keep your shadow styles and how strong they are the same.

Think about readability

Shadows should help, not hurt, how easy it is to read your content. Make sure people can easily read your text and see important elements against their backgrounds.

Don't overuse shadows

Mainly use shadows on things that need to stand out or be separate from the background. Don't use too many shadows to keep your design neat and not too busy.

Think about depth

Think about how things relate to each other in space. Shadows should make sense and look like they're coming from the same direction.

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

• 15 UI Design Mistakes to Avoid to Create Better User Interfaces by Mockflow
• Shadows: what you need to know about them in 2023 by Icons8 Blog