NEUMORPHISM | Soft UI
Tags: discuss, beginners, css, neumorphism
Published: 2020-10-03 14:06:19

After three blogs on **[box-shadow](https://dev.to/ritvikdubey27/box-shadow-in-css-1lf3)** 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](https://dev-to-uploads.s3.amazonaws.com/i/ayahchszehiwkup1pp40.jpg)

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. 

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

```CSS
#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.

{% codepen https://codepen.io/ritvikbunny/pen/vYKBYYj %}

### **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.

```CSS

#inner-container {
    background: #bbd0c9;
}
```

{% codepen https://codepen.io/ritvikbunny/pen/ZEOzEYW %}

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.

```CSS

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

{% codepen https://codepen.io/ritvikbunny/pen/BazBaKE %}

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.

```CSS

#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**.

{% codepen https://codepen.io/ritvikbunny/pen/JjKPjRO %}

### **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. 

```CSS

#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**.

{% codepen https://codepen.io/ritvikbunny/pen/XWKrWNM %}

### 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.

```CSS

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

{% codepen https://codepen.io/ritvikbunny/pen/ZEOzEXL %}

### **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.

```CSS

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

{% codepen https://codepen.io/ritvikbunny/pen/vYKBGRe %}

#### 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](https://codepen.io/ritvikbunny) 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](https://twitter.com/ritvikdubey27?s=09) or [LinkedIn](https://www.linkedin.com/in/ritvik-dubey-3bbb22169)*