Neumorphism (Soft UI) in User interface design - Tutorial

Neumorphism or Soft UI. Some are saying Neumorphism going to be a new biggest trend in User interface design in 2020. Today we are going to achieve this effect with Softwares as well as Html Css Code.

Published in

UX Planet

5 min readDec 25, 2019

There was a time when Skeuomorphism was a big trend and it's back again with a New Approach Neumorphism (New+Skeuomorphism).

Find me on 📸 Instagram→
Clients Projects & Case studies ✍🏻 Behance→

What is Neumorphism design?

“Neumorphism” is a new visually pleasing cool trend in a design inspired by Skeuomorphism with a more minimal approach Neumorphism (New+Skeuomorphism). A new Trend that got a good amount of attention from people.

How do you design Neumorphism?

In this article, we are going to learn how to create a Neumorphism effect with 3 simples steps. In any software Figma, Illustrator or Abobe XD.

📁 Get Original files→

First Step for Neumorphism

Neumorphism design is all about selecting the right color palettes. For the Neumorphism Effect , you need 3 shades of the same color.

Light Color for Light Shadow
Mid color for Main background and Element color
Dark Color for Dark Shadow

The below-mentioned technique is not the only way to select colors. but using a technique to generate give it consistency and alignment in colors.

1) Create 2 Objects.

Select 2 Color Light and dark.

2) Make Blend with colors

Figma or sketch

Create a mid-tone by copying the dark element and change the L(Light) value of about 10% to 25%.

HSL stands for Hue Saturation light
Select color shade manually by between light and dark colors shown below.
Eg: Convert Hex #A1AFC3 to HSL(215, 22%, 70%);

Color selection in figma for neumorphism

Abobe Illustrator

To Create Colors in for Neumorphism Follow below-given steps.

Select both Objects.
Go to Object > Blend > Make.
Then Choose blend options > In spacing dropdown choose specific steps
Enter 2 and OK.

3) Make it pop

In the last step.
follow the below-given image step (Neumorphism Example).

Select the Mid color as the main color and background color.

Adobe Illustrator

To make shadows copy the main element 2 times. In the first element add light color and in dark element add dark color.
Add a blur of 12px to 16px in both elements and select color as shown in the below image.
Move them light shadow element -9px to -12px in X and Y axis and Dark Shadow object 9px to 12px in X and Y-axis.
add 50% opacity to light and dark shadows.

Figma

add multiple drop shadows to the main element. one for light shadow and one for dark shadow.
a blur of 12px to 16px
Move them light shadow element -9px to -12px in X and Y axis and Dark Shadow object 9px to 12px in X and Y-axis.
add 50% opacity to light and dark shadows.

Sketch

To make shadows copy the main element 2 times. In the first element add light shadow and in the second element add dark shadow.

Below are some examples of neumorphism design that I did.

Neumorphism elements — neumorphism examples

📁 Get Original files→

How to design Neumorphism using CSS code?

To Create this effect Make an element with a class of boxes.
or
Paste this below code in your Html file.

<div class="box"></div>

For effect, we will use the same color values as shown above in RGBA color codes with CSS

body{
    background-color:#E0E5EC;
}

.box{
  /* Basic styling and alignment */
  margin-left: auto;
  margin-right: auto;
  margin-top:100px;
  border-radius:4px;
  width:150px;
  height:150px;
    /* Basic styling and alignment */  /* For Neumorphism Effect */
  background-color:#E0E5EC;
  box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px    rgba(255,255,255, 0.5);
    /* For Neumorphism Effect */
}

Magic is happening by CSS multiple box-shadow properties.
Simply play with shadow.

/* For Neumorphism Effect */  background-color:#E0E5EC;
  box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px    rgba(255,255,255, 0.5);/* For Neumorphism Effect */

The thing to keep in mind while making Neumorphism design.

Always prepare your color palettes.
Always use your background color the same as element color.

I will explore more & share those designs on my Instagram & Dribbble.

Experiment with this technique and share it with me. I would like to see some great exploration by you.

Here is one exploration on Instagram that I did for this article. Let's connect on Instagram.

Neumorphism Soft ui Player — Neumorphism Player

Thank you for making it to the end.

Before you go!

👏Click 50 if you like it.
🙂Click follow Kanhaiya Sharma
📸 Daily design updates on Instagram →
✍🏻 Clients Projects & Case studies Behance→