What are the typical challenges faced when using shadows in design?


When using shadows in design, key challenges include:

  • Ensuring a consistent light source to prevent a disjointed appearance;
  • avoiding overuse which can make the design feel cluttered and overwhelming;
  • considering accessibility to maintain text readability;
  • testing shadows on various backgrounds to ensure they appear effective under different conditions.

Detailed answer

Using shadows in a design can significantly enhance the depth and visual appeal of an interface. However, several challenges can hurt the design's effectiveness and look. Here are some typical challenges and common mistakes to avoid. 

Applying hard shadows

Don't use the default settings in your design tools. Try out different values to create shadows that look smooth and natural. 

Instead of using pure black, choose darker shades that match your design's color scheme. In real life, shadows aren’t black; they’re darker tones of the objects they fall on because of reduced light.

Adjust the opacity according to the blur value and color to achieve your desired effect.

A button with an unnatural black shadow (bad example) and a button with a natural dark blue shadow (good example).


Inconsistent light sources

One of the most common mistakes is not maintaining a consistent light source. Inconsistencies in where shadows are cast relative to their elements can make a design look disjointed and visually confusing. It’s crucial to define a single light source direction and stick to it throughout the design to ensure coherence and realism.

Two cards with a good and a bad example of the light source.


Overusing shadows

Employing too many shadows can clutter the design, making it appear overwhelming and muddled. This not only detracts from the overall aesthetic but can also hinder the user's ability to easily navigate the interface. It’s important to use shadows judiciously and ensure that they serve a clear purpose in enhancing the usability or hierarchy of elements.

The visualization of the small, long, complex shadows and the variant with no shadow at all.


Ignoring accessibility 

Shadows can sometimes reduce the readability of text, especially for users with low vision. When applying shadows, particularly around text or interactive elements, consider their impact on contrast and legibility. 

Ensuring sufficient contrast and avoiding shadows that blur or obscure text are essential for making the design accessible to all users. However, it is generally advisable to avoid using shadows on text altogether to maintain clear and legible typography. 

Not testing with different backgrounds

Shadows can vary significantly in visibility and effect depending on the background they are cast upon. A shadow that looks subtle and sophisticated on a light background might be barely visible on a dark one, or vice versa. 

Testing your design across a range of background colors and patterns is vital to ensure that shadows contribute positively to the design under various conditions.

Tip! Use Figma plugins

Numerous plugins are available in the Figma marketplace to help you create attractive shadows on any component instantly.

There is a useful tool called Beautiful shadows. It has an intuitive interface, allows you to control a light source, and casts shadows on your component in your preferred direction. This plugin automatically generates shadow styles, often layering them for a refined effect.

Related reading: How can I use shadows to enhance visual hierarchy in a design?

🤝 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