Skip to main content

Neumorphism login form UI Design using HTML and CSS

Neumorphism login form UI Design using HTML and CSS

In this article, I will show you how to create a Neumorphism login form UI design. We all know that the login form plays an important role in any website. Basically, we face the login form to access the account on different websites. Where we can log in to our account with a username and password.

 Neumorphism is currently a very popular UI trend that is being used extensively to create a variety of web elements. This type of design is more beautiful than ordinary design and it is much easier to make. 

This Neumorphism login form I created only with HTML and CSS code. Here is the complete color of the background color and the color of the web element. Basically, in this type of design, the background color of the web page and the element is completely the same. However, in this case, some shadows are created using CSS code which determines the size of these elements.

 I put everything here like a normal login form. First of all, I added a title then there is no place for username and password input. Then there is a login button and there is some text at the bottom.

Neumorphism login form UI Design [Live Demo]

You can use the demo section below to learn how it works. Here you will find the required source code which you can copy and use in any of your work.


See the Pen by Raj Template (@RajTemplate) on CodePen.

Hopefully, the demo above has helped you to get a live experience of this design. 

How to create a Neumorphism login form

Now I have shown below the complete tutorial on how to design this CSS Neumorphism login page. However, if you want to download the source code, then use the download button at the bottom of the article.

Step 1: Basic structure of login form

I have created the basic structure of this login form using the following HTML and CSS code. Only the basic structure of the login form and the following HTML and CSS codes are used to shape the login form.

 Here I used the background color of the webpage # dde1e7. In this case, I have used box-shadow to give shape to this login form. I used height: 420px and width: 350px of login form.

If you watch the demo, you will understand that I have made the two corners of this login form a little round. For this, I have used a border-radius. In this case, I have used a 40px border radius for bottom-right and top-left angles.


<div class="wrapper">
  <div class="login-form">

 </div>
</div>


*{
 margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: sans-serif;
}

body{
  background-color:#dde1e7;
}

.wrapper{
  width: 100%;
  padding: 0 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.login-form{
  width: 350px;
  height: 420px;
  padding: 0 45px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff8a,
              2px 2px 5px rgba(128, 135, 148, 0.562);
  border-bottom-right-radius: 40px;
  border-top-left-radius: 40px;
}


Basic structure of login form

Step 2: Add title

 I have added a title in the login form. I have used font-size: 30px and color black for this title. I used margin: 30px 0 15px to create some space on it. In this case, text-align: center has been used to place the text in the middle.


<div class="title">
  Login Form
</div>


.login-form .title{
  text-align: center;
  margin:30px 0 15px;
  font-weight: 600;
  color: #252525;
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 50px;
}


Add title

Step 3: Create a place to input

Now I have created the input places in this simple Neumorphism login form. Basically, two input spaces are used here, one for the email ID and the other for the password. The box-shadow inset function has been used to make the input places slightly inward.


<div class="input-fields">
  <input type="text" class="input" placeholder="Username">
  <input type="password" class="input" placeholder="Password">
</div>


.input-fields{
  width: 100%;
}

.input-fields .input{
  width: 100%;
  background: none;
  padding: 14px;
  margin-bottom: 22px;
  border: 2px solid #dde1e7;
    box-shadow:
              inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}


Create a place to input

Step 5: Create a login button

I have created a login button using the following codes. Font-size: 23px of the text in this login button and padding: 8px to create some space around it. I have also used box-shadow in this picture to understand the size of the login form.

Added hover effect on login button. This button will move slightly inwards when you click on the button or move the mouse. I have used box-shadow: inset for this.


<div class="btn">login</div>


.btn{
  background: #dde1e7;
  margin-bottom: 40px;
  margin-top: 30px;
  letter-spacing: 3px;
  font-size: 23px;
  box-shadow: -3px -3px 7px #ffffff8a,
              2px 2px 5px rgba(128, 135, 148, 0.562);
  color: #252525;
  text-align: center;
  text-transform: uppercase;
  padding: 8px;
  cursor: pointer;
}
.btn:hover{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}


Create a login button

Step 6: Add some external links

Below all here I have used two texts. One is a forgotten password and the other is for registration. Display: flex and justify-content: space-between has been used to keep these two texts on the same line.


<div class="content">
   <div class="items"><a href="#">Forgot Password</a></div>
   <div class="items"><a href="#">Register Here</a></div>
</div>


.content{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.content .items a{
  text-decoration: none;
  font-size: 15px;
  color: #279bfa;
}
.content .items a:hover{
  color: blue;
}


how to make Neumorphism login form UI design

Hopefully from this article, you have learned how to make Neumorphism login form UI design. In the meantime, I have created many more designs using HTML and CSS. You can see those articles.






Tags

Comments

Post a Comment

Ask Me Anything ........

Popular Posts

Animated Progress Bar using Only HTML and CSS

Animated progress bar is mainly used in various business and personal web sites. css progress bar helps to organize your knowledge in a beautiful way. In this article, I am going to show you how to create an animated progress bar using only HTML and CSS code. I have made many other types of Progress Bar before but in that case, I have used JavaScript.  I have not used any JavaScript or external JavaScript library for this design. I created this Animated Progress Bar design using Pure HTML and CSS code. Skill bars are used on various websites to streamline the amount of experience, education, etc. with the help of animations. First of all, I have given the background-color: # 30336b of a web page. Then I made a small box here. I used four CSS Progress Bar in that box. The value of this bar will be zero when opening the page then gradually it will reach the pre-determined meaning. Video Tutorial of Pure CSS Progress Bar If you want to know how to make it better then you...
Post a Comment
Read more

Show and Hide Password using Javascript

Show and Hide Password is a JavaScript project that is currently widely used. This allows you to hide the password or text in an input box.  Currently, we see such systems in almost all types of social media and website login forms. Even when we turn on the window, we see the Show and Hide Password option in the Password Input Place.  In this article, we are going to learn how to create a Show and Hide password system using JavaScript programming code. This type of system is used in a variety of login and registration forms . Earlier I designed many types of login forms but did not add the option to hide passwords and show. But in this article, I have shown that. This type of design is used where passwords are input. When you input the password, it is seen in bullet format. In that place, you will see a small button or icon which, when clicked, will turn the bullet marks into characters. Video Tutorial of Show and Hide Password  If you have difficulty unde...
Post a Comment
Read more

Sidebar Menu using Only HTML and CSS

Here you will learn how to create Sidebar Menu using Only HTML and CSS. I have created many more sidebar menus but in that case, I have used JavaScript code to make it work. In this case, I did not use any JavaScript or external library.  I have designed the menu on this site using pure HTML and CSS code. Normally it is completely hidden and a small button is found on the home page. When you click on that button, we see the full sidebar menu .  In this case, I have used the profile image to complete it. I also used icons with each menu item.  In this case, instead of JavaScript, I have implemented this HTML sidebar menu  using the checkbox function of HTML code. As I said under normal conditions only we can see a small button. When you click on that button, the full sidebar will appear. This sidebar has a small cancel button which, when clicked, will completely hide the menu bar again. Video Tutorial of Side Navigation Menu If you do not understand what ...
Post a Comment
Read more

Automatic Image Slider using Only HTML & CSS

In this article, I am going to show you how to create an automatic image slider using only HTML and CSS code. We know that an image slider is a simple web element that is used to organize different images of the website in one place.  There are different types of image sliders and the most automatic image slider is used. This type of slider is mainly used in the hero section of the homepage of various websites. In addition, different types of services or portfolio websites are used to decorate the images of many types of projects.  Basically, this type of design has no navigation buttons which means there is no way to change the image manually. The images here will continue to change automatically from time to time. You can set this time in advance.  First of all, I set the background of a web page to black. Then I arranged all the images nicely there. In this case, I did not use any JavaScript code . It was created using effects in the animation of css3. ...
1 comment
Read more