How to create soft UI shadow – Learn UI Design

You are currently viewing How to create soft UI shadow – Learn UI Design

A distinct trend of modern UI design trend is the soft UI shadow that aims to look as natural as possible. Do you want to learn how to create it yourself? Then just follow the steps in this guide. These are more step-by-step guidelines to follow and go through each time you create a shadow to achieve this effect.

Recommended: How to Create a Figma Breadcrumb Component (Stepper)

In the image below, I’ve created 3 different versions of UI shadows. The first one (to the left) is the type of modern soft UI shadow that can be seen on designs today. The one in the middle is the type of UI shadow that you really should try to avoid (looks outdated!). It’s better to not have a shadow at all than to have a really bad one.

UI Design Soft Shadow

1. UI Shadow color

So, the first thing that is important, is the color of the shadow. A common mistake is to make an entirely black shadow. You shouldn’t do that. A modern UI shadow tries to simulate real-world shadows. This means that…

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

I’ve demonstrated the differences in the image below. On the top-ones you can see a shadow color that is adjusted to either the background color, or the shadow elements color.

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.

Soft UI Design System Kit

This is an affiliate link, but my honest recommendation of a product that I think will help you.

Soft UI Design System PRO >

Creating soft UI elements in code can be challenging and time-consuming. So, to make the work process easier, you can use fully-coded soft UI design system kits. My recommendation is one from Creative Tim. The kit contains fully coded elements (over 300 frontend individual elements such as buttons, nacbars, cards, and much more). There’s also a free demo version if you want to try it out.

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

Buy books to learn UI Design

If you want to learn more about UI design, I recommend the following books.

Note! These are affiliate links, but my personal recommendations.

  1. Designing Interfaces: Patterns for Effective Interaction Design
  2. UX/UI Design: Introduction Guide to Intuitive Design and User-Friendly Experience
  3. Practical UI Patterns for Design Systems
  4. (Resource) Mobile UX/UI Design Notebook: Mobile Wireframe Sketchpad

Other UI design articles

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

This Post Has 2 Comments

Leave a Reply