Glassmorphism login form UI Design using HTML & CSS
From this article, you will learn how to create a Glassmorphism login form with the help of HTML and CSS programming code. Glassmorphism is a modern design that is currently used to create a variety of web elements on a large number of websites.
This type of design is much more attractive than the general design and they are much easier to make. These designs are somewhat like transparent designs i.e. in this case also the background can be seen completely transparently. But these designs are more beautiful than transparent designs.
This is a very simple and simple Glassmorphism design login form. It contains everything that is in the normal login form. A place to input email id and password to log in and login button below. You can definitely use the design of any of your websites or projects.
If you are a beginner and want to know which programming code has been used to create an element, you can follow the tutorial below. Here I have shown step by step how I created the login form of this Glassmorphism design.
Step 1: Create the basic structure of this login form
Create the first HTML file to create this design. Then copy and paste the HTML structure below into that file. The structure below provides complete information on where you will add any code. Follow the tutorial below accordingly and create this design by adding the required code.
Step 3: Convert background to Glassmorphism design
With the help of the following programming codes, I have determined the height and length of this login form. We have also converted the background of the login form to the Glassmorphism design.
.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: Design the login title
First of all, I used a header line in the login form. I have used the following HTML and CSS programming code to create and design this line. In this case, the background of that header line has been made a little more opaque so that it can be understood separately from the complete login form.
.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 a place to input emails and passwords
Using the following HTML codes, I have created a place to input the email ID and password contained in this login form. I have added an icon for each case.
Can you explain your project