How to Create Glassmorphism Form using HTML and CSS is a great skill to make your website look modern and unique. Glassmorphism adds a soft, transparent, glass-like effect that makes any form more attractive. In this tutorial, you’ll learn how to build this design step by step using basic HTML for structure and CSS for styling, so you can easily add it to your own projects.
Let’s Start Coding,
Use in HTML
This is the HTML code so first of all create a index.html and paste code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="formbox">
<h1>Login</h1>
<form action="#">
<input type="email" name="" id="email" required="required">
<input type="password" name="" id="password" required="required">
<div class="forgot">
<label for="">
<input type="checkbox" name="" id="remember">
<p>Remember</p>
</label>
<a href="">forget Password</a>
</div>
<button type="submit" id="loginbtn">Login</button>
<p id="noaccount">Don't have an account? <span> Register</span></p>
</form>
</div>
</div>
</body>
</html>
your outline will be complete and design you form use CSS so that create style.css and link your CSS in html file after that use below code.
Use in CSS
You can use this code in style.css file
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url(bgimg.jpg);
background-size: cover;
background-position: center center;
}
.formbox{
width: 350px;
height: 400px;
padding: 30px;
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.315);
}
.formbox h1{
font-size: 40px;
text-align: center;
color: rgb(0, 0, 0);
margin-bottom: 45px;
}
#email , #password{
width: 100%;
height: 40px;
margin-bottom: 20px;
outline: none;
border: none;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.534);
border-radius: 5px;
padding: 0 10px;
}
.forgot{
display: flex;
justify-content: space-between;
align-items: center;
}
.forgot a{
font-size: 15px;
color: white;
}
.forgot label{
display: flex;
gap: 5px;
}
.forgot label #remember{
accent-color: white;
}
.forgot label p{
font-size: 15px;
}
#loginbtn{
width: 100%;
height: 40px;
margin-top: 15px;
border: none;
border-radius: 5px;
font-size: 15px;
font-weight: 700;
color: rgb(21, 21, 22);
background: rgba(255, 255, 255, 0.486);
cursor: pointer;
transition: 0.2s ease;
}
#loginbtn:hover{
background-color: rgba(255, 255, 255, 0.158);
border: 2px solid rgba(255, 255, 255, 0.322);
color: white;
}
#noaccount{
margin-top: 10px;
text-align: center;
font-size: 15px;
color: #e0e0e0;
}
#noaccount span{
color: rgb(0, 0, 0);
transition: 0.3s ease;
}
#noaccount span:hover{
text-decoration: underline;
cursor: pointer;
}