{"id":1180,"date":"2021-03-13T20:25:00","date_gmt":"2021-03-13T20:25:00","guid":{"rendered":"http:\/\/www.wendyzhou.se\/blog\/?p=1180"},"modified":"2025-10-14T17:27:33","modified_gmt":"2025-10-14T17:27:33","slug":"ui-design-create-soft-shadows-3-guidelines","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/ui-design-create-soft-shadows-3-guidelines\/","title":{"rendered":"How to create soft UI shadow – Learn UI Design"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Recommended: How to Create a Figma Breadcrumb Component (Stepper)<\/a><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"UI<\/figure>\n\n\n\n

1. UI Shadow color<\/h2>\n\n\n\n

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…<\/p>\n\n\n\n

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)<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"
Example of similar colored shadow tint vs black shadow tint<\/figcaption><\/figure>\n\n\n\n

2. Layer multiple shadows<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

    \n
  1. X = 0, Y = 5-10, Blur = 10px<\/li>\n\n\n\n
  2. X = 0, Y = 10(+), Blur = 40-50px<\/li>\n<\/ol>\n\n\n\n
    box-shadow: 0 5px 10px rgba(154,160,185,.025), 0 15px 40px rgba(166,173,201,.2);<\/code><\/pre>\n\n\n\n
    3. Lower the color opacity<\/h2>\n\n\n\n
    This last guideline is about lowering the color opacity on the shadow to around 20-30.<\/p>\n\n\n\n
    \"\"
    Example of low opacity vs high opacity. The rest of the settings are identical.<\/figcaption><\/figure>\n\n\n\n
    <\/h2>\n\n\n\n
    Buy books to learn UI Design<\/h2>\n\n\n\n
    If you want to learn more about UI design, I recommend the following books. <\/p>\n\n\n\n
    Note! These are affiliate links, but my personal recommendations<\/em>.<\/p>\n\n\n\n
      \n
    1. Designing Interfaces: Patterns for Effective Interaction Design<\/a><\/strong><\/li>\n\n\n\n
    2. UX\/UI Design: Introduction Guide to Intuitive Design and User-Friendly Experience<\/a><\/strong><\/li>\n\n\n\n
    3. Practical UI Patterns for Design Systems<\/strong><\/a><\/li>\n\n\n\n
    4. (Resource) Mobile UX\/UI Design Notebook: Mobile Wireframe Sketchpad<\/a><\/strong><\/li>\n<\/ol>\n\n\n\n
      Other UI design articles<\/h2>\n\n\n\n
      I’m listing a few other UI tutorials and articles down below if you’re interested in more.<\/p>\n\n\n\n