This is the second part of User interface trends - Neumorphism, and contains only a short tutorial on how to do neumorphism

Today we'll discuss a emerging trend, what are it's inspiration, problems and how to make it work as a trend, and on the next one we'll do a little tutorial and maybe some more.

Our job is to recreate this effect :

So how do we make it ?

Neumorphism is all about having the right color palette. You will need 3 shades of the same color.

• Light color for Light shadow
• Main color for Element color
• Dark color for Dark shadow

But getting those colors can be really tricky, possibly time consuming for developers. But fear not, the simples way to find those colors, at least for me, is neumorphism.io.

I've found the mose usefull settigns to be :

• Distance between 8px and 16px
• Intensity for bright colors around 0.1 and for dark colors around 0.45
• Blur 24px to 32px, depending on object size

Cookbook

First let's make a rectangle, pretty simple.

<div
  style="
    display:block;
    width:128px;
    height:128px;
    background:var(--some-color);"
/>

Now all we need to do is add shadows and change the element color

<div
  style="
    display:block;
    width:128px;
    height:128px;
    background:var(--primary-color);
    /* new */
    border-radius:32px; 
    box-shadow:  8px 8px 12px var(--box-shadow-1), 
                -8px -8px 12px var(--box-shadow-2);"
/>

Want to make a button out of this ? No problem just add inset to the shadows.

<div
  style="
    display:block;
    width:128px;
    height:128px;
    background:var(--primary-color);
    border-radius:32px; 
    /* new */
    box-shadow: inset  8px 8px 12px var(--box-shadow-1), 
                inset -8px -8px 12px var(--box-shadow-2);"
/>

How to use it ?

Knowing when and how to use neumorphism is a challenge. For now this style is best used for UI/UX design, maybe some web design. But definitely should not be used in everyday prints. For it to be more useful its needs to be reworked and adjusted.

This will happen as more and more designers try their hands at neumorphic design, adding a touch of their vision to it. Ultimately if somebody likes it they should probably try to use it in their own project.