Thread by @Prathkum

Neumorphism UI might not be best industrial practice, but it's worth trying.

Let's create a neumorphic form using a few simple CSS steps.

A thread 🧵👇🏻

Neumorphic design is another UI design that has become popular these days.

Making neumorphic effect is actually pretty easy using only just CSS box-shadow.

We'll be creating a neumorphic form in steps. 👇🏻

Step 1:

Place a light source (virtually) on the screen. In this example, I'm considering that light source is placed top left corner of the screen.

Step 2:

Create a container div and set the background color slightly darker than white. I picked #ecf0f3. Make sure that the color of the body and container should be the same.

As we placed our light source on the top-left corner, make sure the left and top border of the container should be brighter than the right and bottom border.

This will make the element looks like it has a light source illuminating from the top left corner of the screen.

STEP 3:

Create a brand logo using the same technique.

Since the brand will protrude from the container, use the same color, i.e., #ecf0f3.

Add bright color shadow at the top left side and dark color shadow at the bottom right side.

STEP 4:

The input fields are going to have a sunken effect. And to achieve this, we will use an inset box-shadow.

As light is coming from the top-left corner, the right and bottom border will be bright because input fields have a sunken effect.

STEP 5:

Create a button preferably of the same color as of logo because this will give you a fascinating look at your design.

Add hover selector and apply box-shadow none when you mouse over it.

That's it!

Neumorphic design is all based on box-shadow property.

You just need to remember two things. 👇🏻

- Protrude effect in outer element (normal box-shadow)
- Sunken effect in inner elements (inset box-shadow)

With that being said, follow @Prathkum for more excellent content. 😉

Check out the full source code here.

codepen.io/prathkum/pen/O…