How to Make Badass Shadows

View the original post

Shadow Tips

Tips to help create better UI shadows.

This article is brought to you by
Visit our premium asset store and level up your design inventory. ☟

Buninux – World-class UI/UX assets for designers and developers.

Buninux—world-class UI assets for designers & developers.


Shadows play a huge role in modern user interfaces. They bring depth and hierarchy to organized rectangles.

Based on how you use them, they are able to bring joy and a feel of elevation to your interface. So here are my tips to help create better shadows with such design tools as Sketch, Figma, or XD.

Tip 1 — Make it Soft

Don’t use default application shadows. Instead, adjust the shadow opacity around 5–25%, and set a higher level of blur.

Tip 2—Use multiple shadows

To better mimic the distance between element and background, apply multiple shadows on a single layer.

Bonus Tip:

You can also perform this trick with CSS. Here is a great material showcasing many use cases of applying multiple shadows within a single property.

Tip 3—Don’t use pure black

Avoid using #000 for shadows. To make the shadow look more realistic — pick a color based on the element background or its surroundings.

Tip 4—Use a separate layer as a shadow

For a more decorative purpose. You can duplicate the layer and put it beneath the original to emit a more natural-looking shadow.

Add a smaller layer with a maxed blur behind your fore element.

Tip 5— Add depth

Position your shadows based on the light source to emit its direction. Lower the fore layer’s opacity and a add a slight border for more depth vibes.

Tip 6— Make it crisp

Add a 2-step gradient stroke/border to highlight the shadow and make it crispy.

Tip 7 — Blur images background

Put a blurred image behind another to radiate a more natural colored shadow and match it with the image.

Tip 8—Handy tools

Tools — Generate Soft-UI CSS code;—Make a smooth shadow visually and copy the code;—Generate neumorphic styles;—Neumorphic playgroud.

Material shadows & elevation;
CSS shadow-box.

Thanks for the read. This material was originally was posted on my Instagram. Please subscribe for more usefulness. 👐

You can also visit my premium UI asset store and support your local design dealer. ☟

Buninux – World-class UI/UX assets for designers and developers.

Buninux — World-class UI assets for designers & developers.

How to Make Badass Shadows was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.