Hello Web Devs, Welcome to another Web Development Project In this We will Be Creating a Glassmorphism Login & Sign Up Form Using HTML & CSS. In this Project Both Login & Sign Up Form Will Be Within One Page. User Can Switch Between Both of the Forms Using a Toggle Button On the Top Most Side of the Form.
Also Read:
• Create Notes App Using Pure JavaScript
• Random Quote Generator JavaScript
This Login Form Also Have a Option of Don’t Have a Account which is When User Clicks It Will Automatically Toggle the Tab to Sign Up, so that the user can create and account and then login to the account.
Here Is How It Will Look after You Copy-Paste the Code
Programmers Be Like:
HTML CODE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login & Sign Up Form</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome CDN -->
<script src="https://kit.fontawesome.com/406c1fcfd3.js" crossorigin="anonymous"></script>
<!-- Font Awesome CDN -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="title-text">
<div class="title login">
Login Form
</div>
<div class="title signup">
Sign Up Form
</div>
</div>
<div class="form-container">
<div class="slide-controls">
<input type="radio" name="slide" id="login" checked>
<input type="radio" name="slide" id="signup">
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Sign Up</label>
<div class="slider-tab"></div>
</div>
<div class="form-inner">
<form action="#" class="login">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<button type="submit" class="btn">Login<i class="fa-solid fa-right-to-bracket"></button></i>
</div>
<div class="signup-link">
Don't Have Account?<a href=""> Sign Up </a>
</div>
</form>
<form action="#" class="signup">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="field">
<input type="password" placeholder="Confirm password" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<button type="submit" class="btn">Sign Up<i class="fa-solid fa-user-plus"></button></i>
</div>
</form>
</div>
</div>
</div>
<!-- JS FILE LINKING -->
<script src="app.js"></script>
<!-- JS FILE LINKING -->
</body>
</html>Next One is , The CSS Used in the Form
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: -webkit-linear-gradient(left, #42c0ff, rgb(0, 183, 255));
}
::selection{
background: #1a0ce4;
color: #fff;
}
.wrapper{
overflow: hidden;
max-width: 390px;
background: rgb(255,255,255,0.1);
backdrop-filter: blur(5px);
padding: 30px;
border-radius: 5px;
box-shadow: 0px 25px 45px rgba(0,0,0,0.1);
border: 1px solid rgb(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.wrapper .title-text{
display: flex;
width: 200%;
}
.wrapper .title{
width: 50%;
font-size: 35px;
font-weight: 600;
text-align: center;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
position: relative;
display: flex;
height: 50px;
width: 100%;
overflow: hidden;
margin: 30px 0 10px 0;
justify-content: space-between;
border: 1px solid rgb(255,255,255,0.5);
border-radius: 5px;
}
.slide-controls .slide{
height: 100%;
width: 100%;
color: #fff;
font-size: 18px;
font-weight: 500;
text-align: center;
line-height: 48px;
cursor: pointer;
z-index: 1;
transition: all 0.6s ease;
}
.slide-controls label.signup{
color: #000;
}
.slide-controls .slider-tab{
position: absolute;
height: 100%;
width: 50%;
left: 0;
z-index: 0;
border-radius: 5px;
background: -webkit-linear-gradient(left, #220beb, #5653ff);
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
display: none;
}
#signup:checked ~ .slider-tab{
left: 50%;
}
#signup:checked ~ label.signup{
color: #fff;
cursor: default;
user-select: none;
}
#signup:checked ~ label.login{
color: #000;
}
#login:checked ~ label.signup{
color: #000;
}
#login:checked ~ label.login{
cursor: default;
user-select: none;
}
.wrapper .form-container{
width: 100%;
overflow: hidden;
}
.form-container .form-inner{
display: flex;
width: 200%;
}
.form-container .form-inner form{
width: 50%;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.form-inner form .field input{
height: 100%;
width: 100%;
outline: none;
padding-left: 15px;
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
border-bottom-width: 2px;
font-size: 17px;
transition: all 0.3s ease;
}
.form-inner form .field input:focus{
border-color: #1a0ce4;
/* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
color: #999;
transition: all 0.3s ease;
}
form .field input:focus::placeholder{
color: #b3b3b3;
}
.form-inner form .pass-link{
margin-top: 5px;
}
.form-inner form .signup-link{
text-align: center;
margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
color: #1a0ce4;
text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
text-decoration: underline;
}
form .btn{
height: 50px;
width: 100%;
border-radius: 5px;
position: relative;
overflow: hidden;
}
form .btn .btn-layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(right, rgb(22, 5, 255), #2a86ff, #0c92ff, #0077ff);
border-radius: 5px;
transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
left: 0;
}
.btn{
color: #fff;
font-size: 20px;
background-color:rgb(42, 42, 255);
cursor: pointer;
}
i{
padding: 8px;
}And After You Complete the Writing Of the HTML & CSS Code Your Form Is Ready, So This is It For Today Blog, See you In the Next One Till Then Keep Coding Keep Exploring
Founder & CEO at Mr Programmer
Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users!
We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.
We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.
If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.
We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.
We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.
If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.
Latest posts by Tanmay Sinha (see all)
- Introduction to Entrepreneurship: Everything You Need to Know Before You Start - June 12, 2025
- What Sets Artificial Intelligence Apart from Humans? - April 18, 2025
- Python Programming: A Comprehensive Guide for Beginners - March 27, 2025
Related posts:
Create Facebook Post Clone Using HTML, CSS & JavaScript8 min read
Password Validation Using JavaScript3 min read
To-Do List HTML,CSS & JavaScript3 min read
Typing Animation Using HTML & CSS3 min read
Random Quote Generator JavaScript3 min read
5 Best Free Web Development Courses | Learn Web Development3 min read
App Vs Web Development | Which One Is Best?2 min read
Create a Movie Website Using an API | Web Development Projects15 min read
5 comments