The dreaded drop shadow. A design feature that can be SO wrongly used in so many ways.
Amateur designers can often get obsessed with drop shadows, and will overuse them so much that the design becomes atrocious.
There are positive ways you can utilize them, but it should be done in moderation.
In order to help shift your mindset in how you incorporate drop shadows, you should really only consider it if it enhances the overall design — not deters or distracts.
You’ve got to stray away from using drop shadows because you think they “look cool”.
They’re really not that cool, and when used properly, you should barely even notice they’re there.
And if you do notice them, they’re probably overdone.
So when should drop shadows be considered, and how can you use them effectively?
The 2 ways I use drop shadows
Mainly, there are two areas where I’ll look to incorporate a drop shadow in web design.
To help with readability
The first is if I’m placing text on top of an image that doesn’t have sufficient contrast.
Take this page hero design for example:
As you can see, the title “Hello World” can be difficult to read on top of that image.
As a solution, we can do a couple of things to help this.
First, we can darken the image just a hair to help with that contrast.
Second, we can explore adding a drop shadow to the title.
Together, these should greatly improve the readability of that text, without causing any dramatic changes to the overall design.
Here’s the result after making these changes:
Huge difference in how this design feels? Not at all. But can you read the page title much easier? Absolutely!
The best part is, you can’t even tell there’s a drop shadow on the text — it’s dark, but soft enough of a blur that helps it blend well.
To add depth to your layouts
Now the second area I’ll look to implement a drop shadow is on a card design — usually, to help add depth to the layout.
Again, here’s a 3-column card layout example:
In this layout, because of the light background, it’s difficult to really see the three cards apart from each other.
Could I add a subtle border to them? Sure, that’s an option.
But it would still feel “flat” and not achieve the depth I’m looking for.
Enter…drop shadows!
By adding a nice, subtle drop shadow that’s soft but still effective can go a long way.
Here’s the result:
Way better, right?!
In this design, it really lifts those cards off the page, and helps them stand out from the adjacent sections.
However, it doesn’t overdo it or distract from the copy — instead, it compliments it and draws the visitor in to information that may be more important or relevant.
Although what may have been a bit of an old-school approach by using shadows, they can be done well in modern design.
So try applying drop shadows on your next design — but remember, keep it light, subtle, and soften it enough that makes a difference, but doesn’t deter.
See you next time!
