Neumorphism is a trendy UI style nowadays. So let's create a neumorphic form using few simple steps
THREAD🧵
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👇🏼
2.
Making neumorphic effect is actually pretty easy using only just CSS box-shadow
We'll be creating a neumorphic form in steps👇🏼
2.
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
3.
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
3.
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
CONTINUE...
4.
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
CONTINUE...
4.
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.
5.
This will make the element looks like it has the light source illuminating from the top left corner of the screen.
5.
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
6.
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
6.
STEP 4:
The input fields going to have a sunken effect. And to achieve this we will use inset box-shadow
CONTINUE...
7.
The input fields going to have a sunken effect. And to achieve this we will use inset box-shadow
CONTINUE...
7.
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.
8.
8.
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
9.
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
9.
Wasn't it easy?
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)
10.
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)
10.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
