Neumorphism is a modern  UI Design login form that is currently very popular. You will see such forms on various websites. Only some special CSS programming code is used to make it. The concept of this type of login form is very simple. In this case, the color of the login form and background is white or any other specific color. To increase the demand for neumorphism, designers are pushing for such forms to become more professional. If you want to be a designer, you must know this type of  UI Design login form. If you want to learn how to make it, this article will guide you completely. In this article, I have created a remarkable Neumorphism form and fully explained to you how it was made. From the demo above you must have understood how this login form works and what it looks like.


 There is no substitute for this type of form in terms of design and style. This will undoubtedly help to enhance the quality and beauty of your website.


 Some special information regarding this Neumorphism login form

     ➤I used HTML and CSS programming code to make it.


     Like the normal login form, this form has space to input an email id and password to log in, and below is a button to log in.


     There are also forgotten passwords and the option to create a new account.


Create Neumorphism Login Form UI Design Using HTML and CSS


All in all, it can be called a professional login form design. If you like the design and you want to make it, you must follow the steps below. 

You create an HTML file to create this type of form. After creating the file, you can copy the HTML and CSS code from the top of this article and add it to the file. You can also create a separate CSS file. But in that case, you must attach your CSS file to the HTML file. Below I have shared with you how to make it better. Hopefully, you can understand from the following methods which code has been used to make it 


Add HTML code to create the structure

 This is the HTML programming code that was used to construct this Neumorphism login form.

 The role of HTML programming code is most important in designing any form. In this case, it has been created with the help of an HTML program. Below I have shown which code I have used for which work.


Email field

<div class="field">
          <span class="fas fa-user"></span>
          <input type="text" required>
          <label>Email or Phone</label><!--                                                                                                                                     /*forgot-pass:hover a{text-decoration: underline}button{margin: 15px 0;width: 100%;height: 50px;color: #000;font-size: 18px;font-weight: 60 background: #dde1e7;border: none;outline: nocursor: pointer;border-radius: 25px;box-shadow: 2px 2px 5px #babecc,-5px -5px 10px #ffffff73;}*/-->
        </div>


Password Field

<div class="field">
          <span class="fas fa-lock"></span>
          <input type="password">
          <label>Password</label>
        </div>

Forgot Option

<div class="forgot-pass"><a href="#">Forgot Password?</a></div>


Button

<button>Sign in</button>
        <div class="signup">Not a member?
          <a href="#">signup now</a>
        </div>


Add CSS code to design the form

 The following code is the CSS programming code that was originally used to make this form professional. This type of login form is based on some special code of the CSS program. Since it is a form of Neumorphism, the role of CSS is much more in this case. Below is information on how I used the following codes and what code I used for what purpose.


Body

*{
  margin:0;
  padding0;
  box-sizingborder-box;
  font-family'Poppins'sans-serif;
}

html,body{
  height100%;
}

body{
  displaygrid;
  place-itemscenter;
  text-aligncenter;
  background#dde1e7;
}
                                                                                                                                     /*forgot-pass:hover a{text-decoration: underline}button{margin: 15px 0;width: 100%;height: 50px;color: #000;font-size: 18px;font-weight: 60 background: #dde1e7;border: none;outline: nocursor: pointer;border-radius: 25px;box-shadow: 2px 2px 5px #babecc,-5px -5px 10px #ffffff73;}*/

 

Form Content

.content{
  width330px;
  background#dde1e7;
  border-radius10px;
  padding40px 30px;
  box-shadow-3px -3px 7px #ffffff73,
              2px 2px 5px rgba(941041210.288);
}

.content .text{
  font-size33px;
  font-weight600;
  margin-bottom35px;
  color#000;
}
                                                                                                                                     /*forgot-pass:hover a{text-decoration: underline}button{margin: 15px 0;width: 100%;height: 50px;color: #000;font-size: 18px;font-weight: 60 background: #dde1e7;border: none;outline: nocursor: pointer;border-radius: 25px;box-shadow: 2px 2px 5px #babecc,-5px -5px 10px #ffffff73;}*/
.content .field{
  height50px;
  width100%;
  displayflex;
  positionrelative;
}


Password Input

.forgot-pass{
  text-alignleft;
  margin10px 0 10px 5px;
}

.forgot-pass a{
  font-size16px;
  color#3498db;
  text-decorationnone;
}

.forgot-pass:hover a{
  text-decorationunderline;
}      


Login Button

button{
  margin15px 0;
  width100%;
  height50px;
  color#000;
  font-size18px;
  font-weight600;
  background#dde1e7;
  bordernone;
  outlinenone;
  cursorpointer;
  border-radius25px;
  box-shadow2px 2px 5px #babecc,
              -5px -5px 10px #ffffff73;
}
                                                                                                                                     /*forgot-pass:hover a{text-decoration: underline}button{margin: 15px 0;width: 100%;height: 50px;color: #000;font-size: 18px;font-weight: 60 background: #dde1e7;border: none;outline: nocursor: pointer;border-radius: 25px;box-shadow: 2px 2px 5px #babecc,-5px -5px 10px #ffffff73;}*/
button:focus{
  color#3498db;
  box-shadowinset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}


Signup Option

.signup{
  font-size16px;
  color#595959;
  margin10px 0;
}

.signup a{
  color#000;
  text-decorationnone;
}

.signup a:hover{
  text-decorationunderline;
}                                                                                                                                     /*forgot-pass:hover a{text-decoration: underline}button{margin: 15px 0;width: 100%;height: 50px;color: #000;font-size: 18px;font-weight: 60 background: #dde1e7;border: none;outline: nocursor: pointer;border-radius: 25px;box-shadow: 2px 2px 5px #babecc,-5px -5px 10px #ffffff73;}*/


Hope the above information has definitely helped you. If you have any problems with this Neumorphism login form  UI Design or how to make it, you can definitely let me know by commenting. If you want to know how to create a login form, you must try to create such a login form.

1 Comments

Comment Plz...........

Post a Comment

Comment Plz...........

Previous Post Next Post