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 🧵
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 🔽
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
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
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.
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
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.
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
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)
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
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 😉
Peace out 😉
Fleeting is an art
I often share more info in my fleet section as well. So be sure to be active there as well 😉
I often share more info in my fleet section as well. So be sure to be active there as well 😉
• • •
Missing some Tweet in this thread? You can try to
force a refresh
