How to Create a Polished and Professional Figma Dropshadow

And why some drop shadows look better than others.
How to Create a Polished and Professional Figma Dropshadow

Dropshadows are important in UI design. They can be used to aesthetic ends as well as a functional ends; elements with dropshadows signal to our brains that the element is lifted, and therefore, something that can be pressed.

This is why buttons often have drop shadows, as well as other elements, especially things like switches, knobs, and dials. If you take a look at Apple's design system for iOS 16, for example, drop shadows are applied to a specific subset of elements:

This varies to some degree across platforms, but for the most part drop shadows are used strategically and conservatively rather than liberally.

So why do some dropshadows look wrong, and some look... right?

UI Law #1: Your brain expects digital things to follow the laws of the physical world

For real.

Although our new digital universe may be entirely man-made, our brains still evaluates digital objects as if they were physical. This is a core concept of designing for comfort and familiarity in UX Design, UI Design, and Interaction Design.

And as you start designing, the more you take cues from the physical world when designing your product, the more the natural your product will feel.

Take, for example, the drop shadows here:

They may not look terrible, but let's make a small tweak and try this:

Better, right? So... why is that? What's your brain expecting here?

Welp, it's kinda funny. In the absense of another clear light source, it's expecting the Sun.

And where's the Sun relative to... well, everything? Up, of course. In other words...

Cast your UI drop shadows down, like the Sun is the light source

Drop shadows, if you decide to use them in your UI, should pretty much always be cast downward. It's as simple, and silly, as that.

To do this, edit the "Y" value on the shadow in Figma:

You know how you jump when a monster comes out of nowhere in a thriller movie? This is basically that on a smaller scale.

We're not so good at subconsciously knowing what's real and what's not, even if we consciously know it isn't.

Maybe not the movie you pictured, but this had me on the edge of my seat when I was 6.

So cast your shadows down, because even though there's no sun... your brain thinks there is.

Ok, so now we know that as a general rule of thumb, shadows cast downward look more natural because our brains expect them to be obeying the Sun as the light source.

But how long should the shadow be cast, you ask? Well... looking back to our first law, that digital objects should obey physical rules: how high is it?

Cast your shadows depending on the element's "elevation"

Google's Material design system does a pretty good job of explaining this. Basically, if something is higher up, it should have a drop shadow that mimics the natural relationship of a light source and depth:

Notice how the shadow changes the closer it gets to a background surface.

How this relates to objects in our UIs is that we can use drop shadows to indicate to a user what depth certain elements are.

Elevated UI elements' shadows should follow the same behavior and play against a backdrop the same as a physical object's would:

The higher the object is from the surface (aka, your screen,) the more diffuse the shadow will be.

Keep in mind that when you're designing a UI, you don't want to arbitrarily change the depth of shadows on your elements. This adds unnecessary complexity which will result in a bad experience for your users.

Instead, create and follow a system. What elements should have shadows (ie, which elements benefit from looking elevated?) and what height should they be? And then stick to that.

So, how else can we make those shadows more natural looking?

Combine two shadows to create a natural shadow

If you think of the shadows objects cast in real life, they appear to be pretty simple. Depending on the depth, they diffuse out from the "edge" of the object:

However, when you look closer, on some shadows you'll find that it's possible to identify what look almost like separate "layers" or zones of density:

The thing is, like most things in real life, shadows are rarely perfectly defined or symmetrical.

And if we want to create more natural-looking, polished, and professional shadows in our UI designs, we should strive to more closely mimic the way shadows look in the natural world.

However, design tools as well as implementation are limited in the way they can produce shadows. Computers operate on deterministic principles. In the future, we may be able to more reliably (and more importantly: more efficiently) deterministically create less deterministic looking shadows.

🤔
Food for thought: The "natural" shadows in the real world are actually also truly deterministic; they only look organic because the variables present in the physical world are immensely more complex than what we can efficiently render with computers.

For now, we'll have to settle for simulating it.

To do so, we'll combine two shadows: a sharper, more dense shadow, and a larger, more diffuse one.

Bam! We've got a more natural shadow.

So here's how I did it:

You'll have to play with the settings to match your use case and background color, but it should give you a sense of how the two are combined.

And that leads me to the final step to creating more natural drop shadows in Figma...

Pro tip: Shadows aren't black

You've been lied to, folks. When we go to add a drop shadow to our UI element, this is what we get:

If we're aiming to create the most polished, natural-looking shadows we can create, this a problem.

If you didn't know this: shadows are not the color black on top of a background – they are actually just the background, with less light.

Aka, shadows, simplistically, are just a shade of the background color. See? Even the words make sense now. Shade. Shadow.

The more complex answer is that the true color of a shadow is a combination of the color of the material it's cast onto, as well as the color of the reflection of any nearby objects, including the object that cast the shadow.

Take a look around you and start noticing the true color of shadows on objects. For example, that shadow from earlier? Not black, or even gray.

It's like, totally blue:

In context:

Let's take a look at another example. See the shadow under this plant?

It's also not gray or anything like that. It's actually brown, because the wood underneath is brown, and there's just... less light getting to it. So it's just a shade of the color brown of the wood to the left of it.

Pretty neat. The closer you look, the more colorful the world starts to seem.

That's why in this example from earlier, the shadow isn't black or gray, but is actually a dark blue:

And if we try the same thing with black or gray shadows, the result is less compelling:

And all of this is, once again, because of the first law of natural UI design:

#1. Treat digital elements as if they exist in the physical world
🤔
Colors in UI shadows should be used carefully. Until recently, it wasn't something that could actually be implemented well on any platform. And done with a heavy hand, you can have some really... awful looking UIs. For the most part, I'd only recommend using color-based shadows for very custom projects or UI-based illustrations. (think: Dribbble)

As always, thanks for reading, and please let me know if I left anything out OR could've explained something better!

Happy designing!

UI design expertise on tap

Become a better designer in 10 minutes a day. Professional, bite-size design expertise delivered to your inbox.

The UI Lab

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to The UI Lab.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.