Ritvik Dubey

Posted on Oct 3, 2020 • Edited on Oct 5, 2020

NEUMORPHISM | Soft UI

#discuss #beginners #css #neumorphism

After three blogs on box-shadow this is about the best application of box-shadow that is NEUMORPHISM (aka Neomorphism).
Neumorphism is a design trend which is very famous among developer since December 2019. It is a new Skeumorphism. Also the name suggests New + Skeumorphism. Okay let's not waste time in name.
Neumorphic designs are real looking designs, this design looks far better then those super flat designs. Neumorphic designs gives us some 3d feel and also looks cool.!!

Let's have a look at some neumorphic designs

As you can see in above image there is a neumorphic design which contains several neumorphic elements, some are inset some are buttons and some input fields which are in neumorphic design.

Some points you should keep in mind

The colors used in most of the neumorphic design are generally observable close to white. According to me if your neumorphic design is made using bright colors then it will look amazing although some design are better with dark color but I will go with bright this time.

The elements in neumorphic design looks like they are connected to background as these elements are extruded or elevated from the background or inset into the background.

The corners are generally rounded to give it a better look. Rounded corners or circular elements looks much better in neumorphism

The elements in neumorphic designs have two shadows one is dark and the other is bright.

In your designs if there are neumorphic cards then it will look amazing.

Mostly we avoid using borders in neumorphic design.

Also try to avoid over using things.

Let's make a basic neumorphic design to understand it better

Step 1:-

We will create two divs container and inner-container. We will make container flex to align inner-container in center and set the value of margin to auto in inner-container.

<div id="container">
    <div id="inner-container">
    </div>
</div>

#container {
    width: 100vw;
    height: 100vh;
    display: flex;
    background: #bbd0c9;
}

#inner-container {
    width: 20vw;
    height: 20vw;
    margin: auto;
    background: #f7f7f1;
}

As you can see that we have given the inner-container a bright color so its easy for you to see the changes.

Step 2:-

Now we will give inner-container the color same as that of container.

Remember :- In neumophism we give the element same color as of the main background or a very slightly different color.


#inner-container {
    background: #bbd0c9;
}

As you can see now it seems impossible to differentiate between inner-container and container.

Step 3:-

For better differentiation let's give it some border.


#inner-container {
    background: #bbd0c9;
    border: 2px solid red;
}

Now you can easily differentiate between inner-container and container.

Step 4:-

Giving it the darker shadow first. We will pass smaller values of X and Y offset and double value to the blur-radius and also we will keep the intensity of shadow lower.


#inner-container {
    box-shadow: 4px 4px 8px rgba(0,0,0,.1);
}

So as the result of this we will find shadow on the bottom and right side of our inner-container.

Step 5:-

Now we will be giving it the brighter shadow. We will pass similar values which we passed in the darker-shadow but with the negative values of X and Y offset in the same shadow. We will give slightly greater intensity to the shadow.


#inner-container {
    box-shadow: 4px 4px 8px rgba(0,0,0,.1), -4px -4px 8px rgba(255,255,255,.2);
}

So as the result of this we will find shadow on the top and left side of our inner-container.

So here is our first very simple Neumorphic design.

Step 6:-

Making the corners round. To make it look better we will make corners round.


#inner-container {
    box-shadow: 4px 4px 8px rgba(0,0,0,.1), -4px -4px 8px rgba(255,255,255,.2);
    border-radius: 15px;
}

Step 7:-

As I said earlier circular designs looks much better in neumorphism. So let's try making it circular by making border-radius to 50% and also slightly increasing the shadow values.


#inner-container {
    box-shadow: 5px 5px 10px rgba(0,0,0,.1), -5px -5px 10px rgba(255,255,255,.2);
    border-radius: 50%;
}

So that's it for now, I don't want to make it lengthy. So I have decided to write separate blogs on designing some necessary neumorphic designs. Until then you can check my pens at CodePen here I have some awesome work done with Neumorphism.

Thank you for reading.

Please feel free to share your views about it.

I hope you liked it and found it helpful.

Connect with me on Twitter or LinkedIn

Top comments (12)

ljc-dev • Oct 4 '20 • Edited

(this comment will be updated soon 😁)
Edit: Haha great introduction article to neumorphism buddy I've learnt how to make the basic shadow now. Waiting for your next update 😄

Ritvik Dubey • Oct 5 '20 • Edited

Okay buddy JC, article is updated! Now its your turn to update the comment.😜 Edit: Thank you JC😇 Yeah this time not gonna edit this😅 I'll be publishing new one.

Winston Puckett • Oct 7 '20

I found this tool - neumorphism.io and haven't had to write my own neumorphic shadows since. Great post :)

Ritvik Dubey • Oct 12 '20

Yeah that tool is amazing. I forgot to mention it in blog. But I think one must know what actually happens in neumorphism😇

Winston Puckett • Oct 12 '20

Agreed :). When I built neoplumes.com, I built in a css rule which calculated what the neumorphic colors should be, but it probably would have been better to do what you've shown in the post.