Flat UI is getting dull, and drop shadows are rising. Don’t get me wrong, both of those things are mesmerizing in design. Getting it right can be tricky, but it doesn't have to be. Here are helpful tips on creating drop shadows that stand out.
Whether you’re using any design apps (Adobe XD, Figma, Sketch), default shadows don’t look great. So, don’t use those in your design.
To demonstrate this, let’s analyze the properties of the cover image.
Soft shadows are well-known and pretty in design. To do this, try reducing the opacity by 10% to 30% and make it blurry by 15 to 40 pixels. Though, there’s a more convenient way to approach this.
A long time ago, I stumbled upon this tip from Dan Romero, which might fit perfectly for this article.
According to him, if you have a y-axis set, double the value to get the blur amount. As you can see in the settings below, the y-axis (a) is twice the amount for the blur (b). Get it? Great.
In the real world, shadows have a darker tone of color. Try to avoid pure black or the hex code, #000 as your shadow color. Instead, use a darker color based on either the element or its surroundings. That way, the color will look realistic.
To put this further in context, here’s the difference between the two:
Implementing standard shadows is painless. Yet, for a more decorative purpose, you can duplicate and place it behind the element. This technique will give you more control of the shadow.
Lastly, these tips are just the beginning. The next time you’re away from your computer, look around you. Examine how an object or a person casts a shadow and affects its surroundings.