Best User Login Page Design Using Neumorphism

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


Introduction of Neumorphism

Neumorphism, also know as neomorphic is a new design trend which used by 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 Neumorphic Login Page Design.

  • Setting body with background color
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #131419;
  • Setting up form with shadow
.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
.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
.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 explanation of the source code, that how we create a best user login page design using Neumorphic UI with live view.

You can also modify the code accordingly.

If you have any issue hit the comment and will help you out.

Also Check:

Happy Coding..!

Was this article helpful?
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH, my native place in Odisha. I am a Web Programmer by profession and working on more than 50 projects to date. My passion is working on the web-based project using PHP and relate to all CMS and frameworks which is based on PHP.
Posts created 163

3 thoughts on “Best User Login Page Design Using Neumorphism

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
mariobet - supertotobet - escort -

We are now accepting Guest Posting and creation of Backlinks
This is default text for notification bar