Design and Develop Neumorphism Effect

Neumorphism is a design trend that has a minimal approach. Unlike the modern design, the neumorphic elements do not float instead they feel like they are on the surface and hence these items will be having the same color as the background.

To achieve this effect all we have to use is 2 shadows having lighter and darker shades with negative and positive positioning. The lighter shadow depicts the source of light falling on our item and the darker shadow is the actual shadow of the item which will be directly opposite to the position where light is falling.

With these points in mind let's start designing a neumorphic card in Figma. Let's see what we will be trying to achieve:

As you can see in the design Neumorphic design has a subtle effect that suits an overall minimal design.

Designing Neumorphism in Figma

We can design the dark-themed Neumorphic card in Figma and the light theme will follow the same principles with lighter colors.

First, choose a background color. When choosing the background color it is important to note that we don't choose a complete black or white color because using any of these two makes one of your shadows not visible due to lack of contrast. In this example, I used a dark grey color with a color code #1A1B1E.

Next, create a shape of your liking with the same color. I have created a rectangle in the example. When we add this shape it will be invisible as it has the same color, we will be changing that by adding shadows to make the item more visible.

As I said earlier we need 2 shadows for this effect:

A light shadow: Add a drop shadow having a lighter shade of the background color and position it with negative values so that the shadow comes on the top left of the item. The color I used for the light shadow in this example is #242529 and the position I gave was X:-10 Y:-10. Give Opacity: 100% and Blur: 20 to create the shadow effect.

A dark shadow: Create a drop shadow similar to the light shadow but with a darker shade of the background color and positive positioning. In the example, I have used #151518 as the color and X:10 Y:10 as the position. We should also give Opacity: 100% and Blur: 20 same as the light shadow.

With this, we have completed the design of the neumorphic effect in Figma.

Developing Neumorphism with TailwindCSS

Now, let's move on to the development of the neumorphic effect with Tailwind CSS.

For this let's create a container div with the background color used in the design which will hold our neumorphic card.

<div class="min-h-screen bg-[#1A1B1E] flex flex-col justify-center"></div>

In the code above we have used an arbitrary value for the background color of the div as this color is not among the standard colors available in Tailwind CSS.

Next, let's create the neumorphic card div with a specific width and height, and color same as the background color. We should be adding box-shadow to this div to make it visible and bring in the neumorphic effect.

In Tailwind CSS the utility class for box-shadow is shadow. Tailwind provides a set of default shadow classes such as shadow-sm, shadow-md, and shadow-lg. But we require custom shadows on the item thus, we will be using arbitrary values for the shadows. Providing arbitrary values for the shadows is similar to specifying box-shadow with CSS. We must specify the X position, Y position, blur radius, and color. Each of these values will be separated by _. To get the exact box-shadow required for our design we can utilize the inspect tab in Figma. Click on our neumorphic card then click inspect tab on the right side. There we will be able to see the CSS values for the box-shadow used on our element by taking this as a reference we can create a Tailwind shadow class of arbitrary values as below:

shadow-[10px_10px_20px_rgba(21,21,24,1),-10px_-10px_20px_rgba(36,37,41,1)]

Now, all we have to do is add this shadow class to our div and add some content inside the div to display it on a neumorphic card. The final code should look as below:

<div class="min-h-screen bg-[#1A1B1E] flex flex-col justify-center">
  <div 
    class="text-[#6A6C75] text-4xl w-96 h-52 bg-[#1A1B1E] mx-auto rounded-lg flex justify-center items-center shadow-[10px_10px_20px_rgba(21,21,24,1),-10px_-10px_20px_rgba(36,37,41,1)]"
  >
    Dark
  </div>
</div>

The result will be:

We can change the colors to create the same effect for the light theme too. Also, play with all the values to create an effect of your liking.