Foolish Developer

CSS Neumorphism Login Form with HTML & CSS

Complete Guide about web designing - Foolish Developer

Do you want to create a CSS Neumorphism Login Form?

 If your answer is yes then you will get your answer in this article. Here I am going to show you how to create a Neumorphism Login Form using HTML and CSS code.

Already using this design I have created many more types of elements like social media icons, registration forms, sidebar menus, etc. Now is the time to create a login form using the Neumorphism design.

CSS Neumorphism Login Form with HTML & CSS

This is currently a UI trend that is being used extensively to create different elements. The main reason for its rapid popularity is its beauty. 

CSS Neumorphism Login Form

Neumorphism Login Form is much more beautiful and attractive than the general design. The most important point, in this case, is that the same color is given in the background of the webpage and the element.

The question that may arise in your mind is, how do elements determine their size?

 For that, shadows are created here using CSS code. Everything here is like a normal login form. First, there is a profile image with a title below it. Then there is a place to input the email ID and password to log in. I used the icon near that input. Then below is a login button and some basic text.

This CSS Neumorphism Login Form was created by me with the help of HTML and CSS. Below I have given a live demo of it which will help you understand how it works.

See the Pen
CSS Neumorphic Login Form
by Foolish Developer (@fghty)
on CodePen.

 Hopefully, the demo above has helped you understand a lot.

 If you are a beginner then you must follow the tutorial below. In the following tutorial, I have shown step by step how I have created this Neumorphism Login Form HTML CSS. If you want, you can download all the source codes using the download button below.

Step 1: Design the web page to create Neumorphism Login Form

I first designed the web page using the CSS below. Here I have used the background color of the webpage # ecf0f3. This is the same color I used in the element’s background.

* {
  box-sizing: border-box;
}
body {
  margin:0;
  height: 100vh;
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecf0f3;
}
Design the web page

Step 2: Create the basic structure of the Neumorphism Login Form

Now we have created the basic structure of the login form using the following HTML and CSS code. Its height is 500px and width is 330px. I used border-radius: 35px to make the four corners of this box a bit round.

Now using box-shadow I have created a black and white shadow that has given a shape to this login form.

<div class=”login-div”>
 
</div>
.login-div {
  width:330px;
  height: 500px;
  padding: 25px 35px 35px 35px;
  border-radius: 35px;
  background: #ecf0f3;
  box-shadow: 13px 13px 20px #cbced1,
              -13px -13px 20px #ffffff;
}
Create the basic structure of the Neumorphism Login Form

Step 3: Create a logo

I made a logo using the codes below. I used an image to make it. The height and width of that image are 85 px. Border-radius: 50% has been used to make this logo completely round. 

If you look at the logo above, you will understand that a shadow and a border have been created around the image. I used box-shadow to create this.

 <div class=”logo”>
   <img src=”img.jpg” alt=””>
 </div>
.logo img{
  width:85px;
  height: 85px;
  margin-left: 80px;
  border-radius: 50%;
  box-shadow:
     0px 0px 2px #5f5f5f,
     0px 0px 0px 5px #ecf0f3,
     8px 8px 15px #a7aaaf,
     -8px -8px 15px #ffffff;
}
Create logo

Step 4: Add titles to the login form

 Now I have created a title using plain text. I have used font-size: 28px to increase the size of the text. Text-align: center is used to place it in the middle.

 <div class=”title”>Foolish Dev</div>
.title {
  text-align: center;
  font-size: 28px;
  padding-top: 15px;
  letter-spacing: 0.5px;
}
Add titles to the login form

Step 5: Create input place in CSS Neumorphism Login Form

Now create the input spaces using the HTML and CSS code below. For this, I have used the input function of HTML. I used an icon near each input. The specified heights of the input spaces are not given. This height is determined depending on the padding.

<div class=”fields”>
 <div class=”username”>
   <i class=”fa fa-user”></i>
   <input type=”username” class=”user-input” placeholder=”username” />
 </div>
 <div class=”password”>
   <i class=”fa fa-lock”></i> 
   <input type=”password” class=”pass-input” placeholder=”password” />
 </div>
</div>
.fields {
  width: 100%;
  padding: 35px 5px 5px 0px;
}
.fields input {
  border: none;
  outline:none;
  background: none;
  font-size: 18px;
  color: #555;
  margin-left: 10px;
  padding: 20px 10px 10px 5px;
}
.username, .password {
  margin-bottom: 35px;
  border-radius: 15px;
  display: flex;
  box-shadow: inset 8px 8px 8px #cbced1,
              inset -8px -8px 8px #ffffff;
}
.username i, .password i{
 padding-left: 5px;
   margin: 20px 0px 0px 10px;
}
Create a place to input

Step 6: Create a login button to login

Now it’s time to create a login button. The following HTML and CSS codes have been used to create a login button within this Neumorphism signup Form.

The height of this button is 45px and in its background color, I used # 1995c3. The font size has been used to increase the size of the text here.

  <button class=”signin-button”>Login</button>
.signin-button {
  outline: none;
  border:none;
  width:100%;
  height: 45px;
  border-radius: 15px;
  font-size: 20px;
  font-weight: 700;
  font-family: ‘Lato’, sans-serif;
  color:#fff;
  text-align: center;
  background: #1995c3;
  box-shadow: 3px 3px 8px #b1b1b1,
              -3px -3px 8px #ffffff;
  transition: 0.5s;
}
.signin-button:hover {
  background:#2f3ddb;
}
Create a login button to login

Step 7: Add some text to the Neumorphism Login Form

I used a text at the end of it all. This text is primarily for forgetting passwords and creating new accounts. 

 <div class=”link”>
   <a href=”#”>Forgot password?</a> or <a href=”#”>Sign up</a>
 </div>
.link {
  padding-top: 30px;
  text-align: center;
}
.link a {
  text-decoration: none;
  color:#787f82;
  font-size: 15px;
}

 

Neumorphism Login Form UI Design Using HTML and CSS

Hopefully, this tutorial above has completely helped you to create Neumorphism Login from HTML CSS. In the meantime, I have created many more elements of Neumorphism design that will help you to get complete information about this design. 

If there is any problem while creating this Neumorphism Login page, you can definitely let me know by commenting. I have given the download button below to download the complete ones.