How to make neumorphism boxes using CSS
Tags: tutorial, codepen, css, webdev
Published: 2021-07-04 18:51:00

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: 

{% codepen https://codepen.io/shreyas13/pen/GRmpZyb %}
__👆🏻 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!__

<br>

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