How can I make shadows look realistic?

How can I make shadows look realistic?
Karyna Khmelyk
User Experience Designer 6 min read 24 Jun 2024

TL;DR

  • To create realistic shadows, keep them consistent in direction and create soft edges. 
  • Make sure they match the color and opacity of the surface. 
  • Keep them proportional to the object's size and distance. 
  • Adjust angles for perspective. 
  • Test on different devices to ensure they look consistent everywhere.

Detailed answer

To create realistic shadows in user interfaces, it's crucial to understand light behavior and apply it effectively. Here are some tips:

Directional light source 

Determine your UI's light source direction. Shadows should consistently fall in the same direction across elements for realism. Usually, light comes from the top left or right, creating shadows extending to the bottom right or left, respectively.

A screenshot of the design tool where the light source for a shadow is being chosen.

Source

Softness

Real shadows aren't sharply edged. Use blur or feathering effects to soften shadows' edges. The further an object is from the surface casting the shadow, the softer the shadow should be.

An example of the blur and spread parameters for a blue drop shadow.

Source

Opacity and color

Shadows aren't black; they're darker versions of the surface they fall upon. Adjust the opacity and color of shadows to match the surface they're cast upon. For example, a shadow on a white background might be light gray, while on a darker background, it could be darker.

An example of a pure black and a dark blue shadow.

Source

Layering

Implement shadows as separate layers behind the objects they're cast from. This ensures that elements above cast shadows on elements below, maintaining depth perception.

Source Layering Implement shadows as separate layers behind the objects they're cast from. This ensures that elements above cast shadows on elements below, maintaining depth perception.

Source

Consistency 

Maintain shadow style consistency throughout your interface. All shadows should have similar blur, opacity, and color for a cohesive look.

An example of consistent and inconsistent implementation of shadows within a design.

Source

Testing 

Regularly test your UI on various devices and screen sizes to ensure shadows appear consistent and realistic across different platforms.

By applying these principles and paying attention to detail, you can create shadows in your user interface that enhance realism and depth, improving the overall user experience.

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

Previous
next

start your project with us.

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