Glassmorphism Login Form Using HTML & CSS

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

DOWNLOAD SOURCE CODE

Author
Recent Posts

Tanmay Sinha

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.

Glassmorphism Login Form Using HTML & CSS

Related posts:

5 thoughts on “Glassmorphism Login Form Using HTML & CSS5 min read”

Leave a Reply Cancel reply