Learn UI Design – How to create soft UI shadow

Learn UI Design – How to create soft UI shadow

A distinct trend of modern digital design is the soft UI shadow that aims to look as natural as possible. In this guide, I’ll go through some guidelines to follow to achieve this effect.

Example of soft shadows by C_Clin on Dribbble

1. UI Shadow color

The shadow color should be similar to either
1. The background-color (blue shadow on blue background)
2. The element’s color (red shadow behind a red object)

Example of similar colored shadow tint vs black shadow tint

2. Layer multiple shadows

A simple rule to create a soft UI shadow is to use at least two different shadows layered on top of each other. This makes the shadows look more natural.

Below are my two saved templates with a CSS code example. X stands for the how far the shadow extends to the right, Y stands for how far the shadow extends downwards and blur stands for how much blur the shadows should have.

  1. X = 0, Y = 5-10, Blur = 10px
  2. X = 0, Y = 10(+), Blur = 40-50px
box-shadow: 0 5px 10px rgba(154,160,185,.025), 0 15px 40px rgba(166,173,201,.2);

3. Lower the color opacity

This last guideline is about lowering the color opacity on the shadow to around 20-30.

Example of low opacity vs high opacity. The rest of the settings are identical.

And that’s it! I hope this post was helpful.

Other UI design tutorials

I’m listing a few other UI tutorials down below if you’re interested in more.

Wendy Zhou

Wendy Zhou

UX/UI designer from Sweden. I write about design, tech, side projects, personal finance and cyberpunk. Contact: wendyzhou.design@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *