How to make neumorphism boxes using CSS

Hey folks 👋🏻, today we are going to build some squares which are neumorphic in design.

Now you may ask.. What? why are we building squares? believe me, this technique of design can be used anywhere and it will make your website aesthetically pleasing.

Okay, so before we get started let's understand what is neumorphism, it is a design trend which looks very minimal and gives a soft feel to the UI.

This is how it looks:

👆🏻 This may not look nice in the preview, so please open the results in a new tab.

In this design theme, we just have to play around box-shadow and make a light-source and a dark shadow, now you might not understand this by now but you will, when you see how easy the steps are.

NOTE: Before reading the steps, I have given the reference from the codepen's CSS section. So if you don't understand any property do refer to the CSS or comment down below!

Steps:

1. Give the body a background-color in this case I have given rgb(194, 194, 194);.
2. Make four divs with different class names.
3. Apply the same background-color to the div tags as the body, which is rgb(194, 194, 194);.
4. The first box (from the left), is looking like it is lifted of the screen.
   1. This is achieved by providing a light source from the top-left and making a dark shadow on the bottom-right
   2. The light source has to be a little lighter than the background color, usually a color close to white.
   3. The box-shadow is box-shadow: 20px 20px 60px #8d8d8d71, -20px -20px 60px #e0e0e0;, here the negative values indicate the light-source coming from top-left and the positive values represent the dark-shadow formed at the bottom-right.
5. The second box's (from left) corners are lifted and are emerging out of the screen.
   1. This effect is somewhat the same as the first one, but the only difference is here we are giving a linear-gradient to the box which is opposite to the box-shadow.
   2. In simpler terms the top-left corner has a light-source i.e. a light shadow an inside is a dark background-color and vice-versa on the opposite corner.
6. The third box (from-left) looks like it is about to emerge from the screen.
   1. This is the exact opposite to the previous one. The only difference is the colors of linear-gradient are sw apped.
   2. The lighter-shadow side (top-left) has a light color and the darker-shadow side (bottom-right) has a dark color.
7. The fourth box (right-most) is looking like it is pressed inside the screen and is hollow.
   1. This is done by just box-shadow but on the inner side.
   2. We can give box-shadow on the inner side by using a value called inset which will help us give the shadow inside.

That is how easy it was to make these boxes using neumorphism!!

In my upcoming blogs we are going to see the implementation of glassmorphism and neumorphism!! We are going to build a credit-card using these design themes!!

Thank you for reading the whole blog 🎉! If you liked it, do share it with your friends and implement this design in your projects!