Categories: How-ToNew TipsUX

Shadows: what you need to know about them in 2023

Design should not feel sham. It should reflect a real-world experience, with a lot of attention to dimensions. One way to do it is to work with shadows.

Don’t stick to defaults, customize

A lot of design software will have a default shadow option. Don’t fall into this trap. The amateur move is to draw an object and drop a template shadow. But these shortcuts are easy to spot, appear dated, and will take away from the modern look you want to achieve.

Beautiful Shadows, a Figma plugin, will help you create elegantly compiled shadows. There is feathering around the edges, a nice blend out, and the object really pops.

To master your shadowing skills, you should consider the following.


Don’t just create one shadow. This doesn’t allow for any visual transition between the object and the surface, and it makes the illustration style seem overly simplistic. Layering shadows together creates a smoother, softer look that reflects the reality of gradients that a natural light source might cause. This example shows how layering achieves that effect:

To better understand light sources against objects, use this website.


Shadows, while dark, are not black! It definitely requires a lot less thinking to just use a black box. But if we want to keep coloring true to reality, then shadows are actually the same color as their background, just toned down.

If you have an object popping out of a pink surface, your shadow should be deepening shades of magenta!


Shadows can also create a hierarchy within your objects. As we add dimension, that means we are elevating certain design elements above others. The bigger the shadow, the more lifted the object, and the more attention is called to that element.

Beware of overdesign

Remain cautious of overexerting the tips above. There are also trends within the UX/UI design community that are over-eager to shadow every object.

Here, you can see a nice case, but every element of the design is shadowed to the point that the dimension of the experience is hard to understand:

Image courtesy:


These elements all feel like they have conflicting relationships with the background, and the excessive shadowing takes away from the legibility of the objects:

Image courtesy:

Shadow toolkits and packages

Going back to Material Design examples, we can understand why they seemed more structured and formulaic. Their shadows were created based on measurements of the actual shadows when a lamp is pointed straight at a piece of paper.

Behind the scenes of Google teams’ hard work


It is a clean, good, and nice design guideline, their resources prove valuable to a lot of different styles and aesthetics. However, the result is stilted, lacking the natural variant of light in real life, and doesn’t account for the translation into digital visuals. The current trend in design displays more attention to shadows being softer, smoother, and less strict.

One more thing

Creating realistic and modern shadows in design requires more than just a click on “drop shadow” in Figma. There are many factors to consider, and it can be a complex process.

Our team at Lunacy is working on a new feature that will make the process easy for you. A new Lunacy tool will give you a solution that already accounts for the three major steps to good shadows that you just learned about: coloring, layering, and sizing. Create effects that pair well with the background and are feathered with layers. Here’s a sneak peek of a future tool:

It is just a UI draft, but you can already see how advanced it will be.


Stay tuned to Lunacy Twitter to be updated about this feature.


Recent Posts

Auto layouts, import from Figma, and auto Z-index in Lunacy’s new release

Lunacy’s latest release comes with new features designed to speed up your workflow and a…

2 weeks ago

How to design engaging posts on social media

Sometimes there is just no time to wait for a professional designer to make your…

3 weeks ago

What is dynamics in digital design, and how does it work?

Graphic designers use dynamics and movement to make their work more exciting. It can help…

3 weeks ago

Remove backgrounds and upscale lots of pics in 1 click

New AI-based routine killer from the Icons8 team for those who need to edit images…

2 months ago

The best cybersecurity practices for freelance designers

Freelance designers are exposed to a range of cybersecurity threats on a daily basis. Here’s…

2 months ago

The Ultimate Manual for UI Breadcrumbs

You are likely familiar with the phrase "follow the breadcrumbs". However, what exactly does it…

2 months ago

This website uses cookies.