Shadows are everywhere in modern UI Designs. They are one of the most essential part of the UI elements right behind the fill, stroke, and cornder radius. 😉

Completely flat design is no longer a significant trend. With this short tutorial, you will learn how to create stunning shadows for your cards, buttons, or whatever UI control you want.

So, grab the mug of your favorite coffee, and let me show you 6 easy steps for impressive shadows!

1. Do not use shadow defaults

It does not matter if you use Sketch, Figma, or Adobe XD. All default shadow presents from design tools are awful. Do not use them! If you want to make them look clean and modern, you always have to modify their appearance.

2. Make Shadows Look Soft

Most of the nice shadows are the soft ones. To enhance their look — lower opacity (10–30%) and set the higher level of blur (16px-40px). Now look at your shadow — this setup instantly improved its appearance.

3. Consider Creating Shadows As a Layer with Blur

Standard shadow style is easier to implement, but if you would like to stand out, try to make a separate layer with a blur as a shadow. Thanks to this technique, you will gain more control over the shadow position and its size.

I know… developers may hate this technique, but you may help them with this site! 😎

4. Make shadow color more natural

100% pure grey never looks good (except pure black-white theme). Look, the real-world shadows always got a subtle color. Add the tone of your UIs neutral color to the shadow, and it will look much better.

5. Make Material Colors As Shadow

Look at some materials from the real-world, especially semi-transparent ones. Their shadows inherit the color of the object. You may use these tones to create the illustration of that type of material. It will look fresh!

6. Inspire yourself from the real world

The example from the above is just a beginning. Observe how other objects and materials interact with the lighting. See how they cast shadows — colors, blurs, angle. Remarkable results start with a spark of inspiration.

To conclude.

This 6 easy to apply steps will move your shadows to the next level. When you apply the simple tricks, repeat, and adjust them to your projects, you will notice how the quality of your work enhances.

If you found the tutorial useful, share it to let your friends know how to make their UI better!

This article is an extension of my blog post ✍️, which has its origin in the Instagram tutorial 📷.

Thanks for reading!