Create Amazing Shadows In UI

Hi there! 👋

I hope you’re doing supergood! 💜

This week’s newsletter is about drop shadows. Many designers use them wrong, so I thought maybe this can be helpful for some of you.

Let’s get into the good stuff! 👇

---

It is a great thing to use shadows. However, it is easy to use them wrong. Let me help you make your shadows look awesome! ✊

First of all, do not use the default settings because those look unrealistic.

Instead, make it look soft.

You can make your shadow look soft by adding some blur to it. An example:

How much blur do you need?

You can set whatever value you feel like, but if you need some guidelines, you can always multiple the “Y” value by two and set it as the blur value.

Shadow color matters.

Avoid pure black. Always try to use a darker color based on either the element or its surroundings.

Separate layer for shadows.

If you duplicate your element and place it behind it (and add a layer blur), you can have more control over your shadow.

Layering shadows.

You can layer shadows because we know that in the real world, the shadow is darker near the element’s edges.

Layered shadows look like this:

This was it for this week. 🙌

If you’ve learned something, don’t forget to like this post, and have an awesome rest of your week! 💜