Have you ever wondered how to create unique login forms? This article will show how to make the best glass morphism login form using HTML and CSS.
The Glass Morphism Effect is a frosted glass effect in which backgrounds are blurred behind semi-transparent panels. It emphasizes the content while maintaining a sense of depth, increasing the user experience and engagement.
Table of Contents
Introduction
Creating a good impression at first sight is necessary, and since most of the time, the login page is the entry point to the website, making it look good is essential. Using different and unique effects can help.
This article will teach you how to create an excellent login form with a unique and perfect glass morphism effect. Without delay, let us start by following a few simple steps.
Watch the full tutorial on YouTube
If you prefer watching video tutorials over reading articles, you can watch the complete tutorial on Glass Morphism Login Form Using HTML and CSS on my YouTube channel. If needed, you can access the full source code here. While you are at it, do subscribe and like the content.
Source code for the Glass Morphism Login Form Using HTML and CSS
Creating the HTML Structure
First, create a file named index.html with the default HTML boilerplate code for the login form. Include the Font Awesome CDN to use different icons. Font Awesome is the internet’s icon library and toolkit, used by millions of designers, developers, and content creators.
Create a div with the class name ‘content’ inside the div with the class name ‘container’. The content div holds a form, a <a> tag for the forgot password option, and another <a> tag for the signup option.
The form contains a heading element, two divs with the class name ‘field’, and a button with the type submit for form submission functionality.
One field div holds the input field with the type as email, a placeholder of Email, the required attribute, and the envelope icon. Another field div holds the input field with the type as password, a placeholder of Password, the required attribute, and the lock icon.
Refer to the following HTML code and paste it into the file named index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Login Form in Glassmorphism</title>
</head>
<body>
<div class="container">
<div class="content">
<form action="#">
<h2>Login Form</h2>
<div class="field">
<input type="email" placeholder="Email" required>
<i class="fa fa-envelope"></i>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
<i class="fa fa-lock"></i>
</div>
<button type="submit">Login</button>
</form>
<a href="#">Forgot Password?</a>
<p>Don't have an account ? <a href="#">Signup Here</a></p>
</div>
</div>
</body>
</html>Styling with CSS
Create a CSS file named style.css and link it to the HTML file. Do not forget this step; otherwise, the CSS styles won’t be applied.
Style the body element to take up the full height of the viewport with a flex display, centered align-items, centered justify-content, and a background of rgb (112, 112,112). The container div is styled to have a relative positioning.
Using the before pseudo-class, the container div is styled to have an absolute positioning, a background of linear gradient, a z-index of -1, and a border radius of 5 pixels with appropriate width, height, left, and top values.
Also, using the after pseudo-class, the container div is styled to have an absolute positioning, a different linear gradient background, and a different border radius of 50% with changed width, height, right, and bottom values.
The content div is styled to have a flex display, a flex-direction of the column, centered align-items, centered justify-content, centered text alignment, a border radius of 10 pixels, a background of rgba (255, 255, 255, 0.2), and 2 pixels solid border of rgba (255, 255, 255, 0.2).
I then style the heading element with a font size of 30 pixels and a font-weight of 600. Then, the field div is styled to have a relative positioning. Also, the input element is styled to have a border radius of 50 pixels, a font size of 18 pixels, no outline, and a 2 pixels solid border.
The icons have an absolute positioning with a line height of 40 pixels and a font size of 18 pixels. The button element is styled to have a font size of 20 pixels, no outline, a solid border of rgba (0, 0, 0, 0.2), a border radius of 20 pixels, and a cursor pointer.
Finally, the links are styled to have no text decoration initially, a font-weight of 600, and a margin for spacing. The text-decoration is set to underline on hover.
Refer to the following CSS code and paste it into the file named style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(112, 112, 112);
}
.container{
position: relative;
}
.container::before{
content: "";
width: 250px;
height: 250px;
position: absolute;
left: -125px;
top: -125px;
background:linear-gradient(to right, #ff0080, #40e0d0);
z-index: -1;
border-radius: 5px;
}
.container::after{
content: "";
width: 200px;
height: 200px;
position: absolute;
right: -100px;
bottom: -80px;
background:linear-gradient(to right, #fff200, #64f38c);
z-index: -1;
border-radius: 50%;
}
.container .content{
width: 350px;
background: rgba(255, 255, 255,0.1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 10px;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 3px 3px 30px rgba(0,0,0, 0.3);
backdrop-filter: blur(20px);
}
.container .content h2{
font-size: 30px;
font-weight: 600;
margin-bottom: 30px;
}
.container .content .field{
width: 100%;
height: 40px;
position: relative;
margin-bottom: 20px;
}
.container .content .field input{
width: 100%;
height: 100%;
border-radius: 50px;
font-size: 18px;
outline: none;
padding-left: 40px;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 3px 3px 30px rgba(0,0,0, 0.3);
}
.container .content .field i{
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%,-50%);
line-height: 40px;
font-size: 18px;
}
.container .content button{
font-size: 20px;
outline: none;
padding: 8px 15px;
border: 1px solid rgba(0, 0, 0,0.2);
border-radius: 20px;
width: 150px;
cursor: pointer;
box-shadow: 3px 3px 30px rgba(0,0,0, 0.3);
}
.container a,
.container p{
margin-top: 15px;
}
.container a{
text-decoration: none;
font-weight: 600;
}
.container a:hover{
text-decoration: underline;
}Following the above steps, you can create an excellent glass morphism login form using HTML and CSS. You will get access to the complete source code shown in the video by clicking on the button below.
Conclusion
This article taught us how to create a glass morphism login form using HTML and CSS. If you are still stuck or have any questions, please leave them in the comment section. I will be happy to help.
After this, you will be able to create amazing-looking login forms. You can even incorporate new designs and forms into your website, increasing user interaction.
See Also: Incredible Digital Clock Using HTML, CSS, and JavaScript
FAQ
How to create a simple login form using HTML and CSS?
Create a div with the class name ‘content’ inside the div with the class name ‘container’. The content div holds a form containing two divs with the class name ‘field’ and a button with the type submit for form submission functionality.
One field div holds the input field with the type as email, a placeholder of Email, the required attribute, and the envelope icon. Another field div holds the input field with the type as password, a placeholder of Password, the required attribute, and the lock icon.
How to create glassmorphism in HTML CSS?
To create a glass morphism, use the before pseudo-class and style the container div with absolute positioning, a linear gradient background, a z-index of -1, and a border radius of 5 pixels with appropriate width, height, left, and top values.
Also, using the after pseudo-class, the container div is styled to have an absolute positioning, a different linear gradient background, and a different border radius of 50% with changed width, height, right, and bottom values.