Glassmorphism login form UI Design using HTML and CSS

#html #css #javascript #webdev

In this article I am going to show you how to create glassmorphism login form using HTML and CSS programming code. Earlier I showed you how to create a login form of neumorphism design.
This login form is somewhat like the transfer login form. In this case the background can be seen opaquely. In other words, if you use a color image in the background, it can be seen in an opaque way. This seems a lot more interesting than the normal login form. I made this design using HTML and CSS programming code.

You can watch the live demo if you want and also download the required source code. However, if you are a beginner, you can follow the tutorial below to know the complete step by step.

Step 1: Create basic structure and title

The following HTML programming code I have used to create the basic structure and title.



<!DOCTYPE html>
<html lang="en">
<head>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>

    /* CSS Code */

 </style>
</head>
<body>
  <div class="login">
    <h1>Login</h1>

    <!--login Information-->

  </div>  
</body>
</html>

Step 2: Design the background

I have used an image in the background and design the background using the code below.



  body {
  font: 13px/20px "Open Sans", Tahoma, Verdana, sans-serif;
  color: #a7a599;
  background-image: url(3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

Step 3: basic Glassmorphism structure

I have converted the background of this login form to glassmorphism design using the following programming codes. In this case, the image in the background has been made slightly opaque. You can increase or decrease the amount as you wish.



.login {
  position: relative;
  margin: 100px auto;
  width: 370px;
  height: 315px;
 background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
  border-radius: 3px;

}

Step 4: Designed the title in this login form

I designed the title in this login form using the CSS programming code below. In this case, the header line is a little more opaque than the normal login page.



.login h1 {
  line-height: 55px;
  font-size: 24px;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    margin-top: 0px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Step 5: Create Email ID and Password holder

Using the following HTML codes, I have created a place to input the most important thing in the login form, namely password and email ID. In that case I used one icon at a time and used the cdn icon link of Front Assam to make that icon work. Which you must use in the header tag.



 <form class="form" method="post" action="#">

      <p class="field">
        <input type="text" name="login" placeholder="Username" required/>
        <i class="fa fa-user"></i>
      </p>

      <p class="field">
        <input type="password" name="password" placeholder="Password" required/>
        <i class="fa fa-lock"></i>
      </p>

    </form>

Step 6: Designed the input spaces

I have designed the input spaces using the following codes. The following programming has helped to design the icons in this login form.




.form {
  width: 100%;
}
.form .field {
  position: relative;
  margin: 0 50px;
}
::-webkit-input-placeholder {
  color: #ffffff;
  font-family: "Open Sans";
}

.form input[type=text], input[type=password] {
  font-family: "Open Sans", Calibri, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 15px 10px 55px;
  position: relative;
  width: 200px;
  height: 24px;

  border: none;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
  color: rgb(255, 255, 255);
  transition: color 0.3s ease-out;
}

.form input[type=text] {
  margin-bottom: 15px;
}
/*continued styling for input */
.form input[type=checkbox] {
  display: none;
}

Step 7: Decorate the icons

The following codes have helped to decorate the icons beautifully and add the How Ever color effect.



.form .field i {
  font-size: 18px;
  left: 0px;
  top: 0px;
  position: absolute;
  height: 44px;
  width: 44px;
  color: #f7f3eb;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
  text-align: center;
  line-height: 44px;
  transition: all 0.3s ease-out;
  pointer-events: none;
}

Step 8: Create Login Button

The last element of this login form is the login button which I have used to create following programming codes.



 <p class="submit"><input type="submit" name="sent" value="Login"></p>




.form input[type=submit] {
  margin-top: 15px;
  width: 270px;
  text-align: center;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  padding: 12px 0;

  color: #fff;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);

  text-transform: uppercase;
  border: none;

  margin-bottom: 20px;

}

Hopefully from this design you have learned how to create a login form of simple glassmorphism design. Here I have explained to you in full step by step how I made this design.

Related Post:

If you have any problems, you can definitely comment.

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/