Thread by @Prathkum

Neumorphism is a trendy UI style nowadays. It is worth noting that neumorphism is not a replacement for flat design style, but an addition to app user interface design

Let's create a neumorphic form using 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 screen. In this example I'm considering that my light source is placed top left corner of the screen

STEP 2:

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

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

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

STEP 3:

Create a brand logo using same technique. Since brand going to protrude from the container, use 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 going to have a sunken effect. And to achieve this we will use inset box-shadow. As light is coming from top-left corner, hence right and bottom border will be bright in this case because input fields have sunken effect.

STEP 5:

Create a button preferably of same color as logo because this will give you a more fascinating look to 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 thingsDown pointing backhand index

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

You can create neumorphic design using any color scheme you just need to remember that shades should not differ much.

For example: check out this dark and light theme calculator

This is the end of this thread but not our creativity. Give a go to this awesome design and drop the link below ❤️

Peace out 😉

Check out the full source code:

codepen.io/prathkum/pen/O…

Fleeting is an art

I often share more info in my fleet section as well. So be sure to be active there as well 😉