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.
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:
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.
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
As always, thanks for reading, and please let me know if I left anything out OR could've explained something better!
Happy designing!
