Hello everyone, you can learn how to create a GlassMorphism Login Form using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Login Form in GlassMorphism
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
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;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
