Glassmorphism Login Form | Glassmorphism Login Page Code

Table of Contents

Glassmorphism Login Form | Glassmorphism Login Page Code

Welcome to Code With Random blog. We learn how to create a Glassmorphism Login Form. We use HTML & CSS  for Glassmorphism Login Form. Hope you enjoy our blog so let’s start with a basic HTML structure for the Glassmorphism Login Form.

Html Code 

<!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">
  <title>Glassmorphism login Formr</title>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
</head>

<body>
  <div class="inFormBackground">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="inLoginForm">
      <form onsubmit="return false">
        <div class="title">
          <h3>Login Here</h3>
        </div>
        <div class="inputGroup">
          <label for="email">Email</label>
          <input type="email" placeholder="Enter Email" id="email">
        </div>
        <div class="inputGroup">
          <label for="password">Password</label>
          <input type="email" placeholder="Enter Password" id="password">
        </div>
        <button class="submitForm">Log In</button>
        <div class="social">
          <div class="go"><i class="fab fa-google"></i></div>
          <div class="fb"><i class="fab fa-facebook"></i></div>
          <div class="tw"><i class="fab fa-twitter"></i></div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

There is all HTML code for the Glassmorphism Login Form. Now, you can see output without CSS, then we write CSS for the Glassmorphism Login Form.

Output

glassmorphism login page

CSS Code 

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background-color: #141225;
}

.inFormBackground {
  margin: 0rem 2rem;
}

.inFormBackground,
.inLoginForm {
  width: 25rem;
  height: 30rem;
  max-width: 320px;
  position: relative;
}

.circle {
  width: 10rem;
  height: 10rem;
  position: absolute;
  border-radius: 50%;
}

.circle:first-child {
  left: -20%;
  top: -12%;
  background: linear-gradient(#ff0060, #c302b5);
}

.circle:nth-child(2) {
  right: -22%;
  bottom: -14%;
  background: linear-gradient(164deg, #144e7cfc, #1877f2);
}

.inLoginForm form {
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 24rem;
  max-width: 320px;
  position: absolute;
  padding: 50px 35px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.13);
}

form * {
  border: none;
  outline: none;
  color: #ffffff;
  letter-spacing: 0.5px;
  font-family: "Poppins", sans-serif;
}

.title {
  font-size: 32px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
}

.inputGroup label {
  display: block;
  margin-top: 30px;
  font-size: 16px;
  font-weight: 500;
}

.inputGroup input {
  width: 92%;
  height: 50px;
  display: block;
  padding: 0 10px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.07);
}

::placeholder {
  color: #e5e5e5;
}

.submitForm {
  width: 100%;
  z-index: 1;
  margin-top: 30px;
  color: #080710;
  padding: 15px 0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
  background: #fff;
}

.submitForm::before {
  content: "";
  top: 0%;
  left: -100%;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: #fff;
  border-radius: 5px;
  position: absolute;
  transition: left 0.4s, color 0.4s;
  background-color: #202020;
}

.submitForm:hover {
  color: #fff;
}

.submitForm:hover::before {
  left: 0%;
}

.social {
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}

.social div {
  width: 3rem;
  height: 3rem;
  display: flex;
  cursor: pointer;
  color: #eaf0fb;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.27);
}

.social div:hover {
  background-color: rgba(255, 255, 255, 0.47);
}

.social .fb {
  margin-left: 25px;
}

.social .tw {
  margin-left: 25px;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

glassmorphism form

glassmorphism form

We have completed our CSS section,  Here is our updated output with CSS. Hope you like the Glassmorphism Login Form, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

This post teaches us to create a Glassmorphism Login Form using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Md Aman

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3.Notes App Using Html Css Javascript

Share on:

Leave a Comment