Neumorphism UI might not be the best industrial practice, but it's worth trying.
You can make it using a few simple CSS steps: ๐งต
You can make it using a few simple CSS steps: ๐งต
Making neumorphic effect is actually pretty easy using only just CSS box-shadow.
We'll be creating a neumorphic form in steps.
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 the light source is placed the top left corner of the screen.
Place a light source (virtually) on the screen. In this example, I'm considering that the light source is placed the 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.
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.
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.
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.
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.
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)
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
codepen.io
Loading suggestions...