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.
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)
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.
- X = 0, Y = 5-10, Blur = 10px
- 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.
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.