In this article, we talk about Neumorphism Login Page Design. Before the start, we have to know about a brief introduction to Neumorphism.

Introduction of Neumorphism
Neumorphism, also known as neomorphic is a new design trend used all over the world.
Neumorphism, or soft user interface visuals that combine a background of the page colors, highlights, shadows, and shapes.
Neumorphism combines developments of flat design and skeuomorphism.
Login Page Design Code
Here we start the login page design code with live view.
See the Pen User Login Page Design Using Neumorphism by Bikash Panda (@phpcodertech) on CodePen.
Explanation Of Login Page Design code
Here is the complete explanation of the Neumorphic Login Page Design.
- Setting body with background color
1 2 3 4 5 6 7 |
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #131419; } |
- Setting up form with shadow
1 2 3 4 5 6 7 8 9 10 |
.form { position: relative; width: 350px; padding: 40px 40px 60px; border-radius: 10px; background: #131419; text-align: center; box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.5); } |
- Input box design
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.form .input .inputBox input { width: 100%; height: 50px; color: #03a9f4; background: #131419; border: none; outline: none; border-radius: 40px; padding: 5px 15px; font-size: 18px; box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1), inset 2px 2px 6px rgba(0, 0, 0, 0.8); } |
- Form button design
1 2 3 4 5 6 7 8 9 10 11 |
.form .input .inputBox input[type="submit"] { margin-top: 20px; box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); } .form .input .inputBox input[type="submit"]:active { color: #006c9c; margin-top: 20px; box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1), inset 2px 2px 6px rgba(0, 0, 0, 0.8); } |
Above are the important highlight and explanations of the source code, that is how we create the best user login page design using Neumorphic UI with live view.
You can also modify the code accordingly.
If you have any issues hit the comment and will help you out.
Create digital content quickly and easily https://www.makevu.com/.
Also Check:
- CSS Background Image Text Effect
- Create Date Picker using Materialize Framework
- Auto Expand Input and Textarea Based on Text Length
- 3D Loader using CSS
Happy Coding..!
Nice Login Page. I am also looking for this.
The introductiontext is BS! A joke!
The buttons are nice though 😉