DEV Community

Cover image for NEUMORPHISM | Soft UI
Ritvik Dubey
Ritvik Dubey

Posted on • Updated on

NEUMORPHISM | Soft UI

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

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
#container {
    width: 100vw;
    height: 100vh;
    display: flex;
    background: #bbd0c9;
}

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
ljcdev profile image
ljc-dev • 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 πŸ˜„

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey • 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.

Collapse
 
winstonpuckett profile image
Winston Puckett

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

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

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

Collapse
 
winstonpuckett profile image
Winston Puckett

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.

Collapse
 
curlmuhi profile image
Ekta Maurya

Great blog πŸ‘πŸ˜‡ keep goingπŸ’ͺ

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank you so much EktaπŸ˜‡β€οΈ

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank you so much ShadowπŸ˜‡β€οΈ

Collapse
 
ozakaran profile image
πŸ†– Karan Oza

Very helpful for newbies in css...πŸ‘
Great going Ritvik πŸ‘

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Yeah writing most of the articles to help newbies. Thank you brother for always being supportive πŸ˜‡

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank you brother😊 Yeah sure I'll write moreπŸ™ŒπŸ˜