DEV Community

Cover image for Glassmorphism login form UI Design using HTML and CSS
Foolish Developer
Foolish Developer

Posted on • Updated on

Glassmorphism login form UI Design using HTML and CSS

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}

Enter fullscreen mode Exit fullscreen mode

Alt Text

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;

}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

.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;

}

Enter fullscreen mode Exit fullscreen mode

Alt Text

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.

If you have any problems, you can definitely comment.

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

Top comments (5)

Collapse
 
dacreb profile image
Alesba

i loved.

Collapse
 
nsnyder profile image
Nathan Snyder

It's a really neat idea, but it doesn't work in Firefox, so tread carefully with the compatibility.

Collapse
 
junihh profile image
Junior Hernandez

Yes, the backdrop-filter fail in Firefox. 😔

Collapse
 
lexmarie790 profile image
leximarie27

Ohh gonna try this out on the project I am currently working on! :)

Collapse
 
janpauldahlke profile image
jan paul

solid css. <3 unicorne