Glassmorphism login Form using HTML and CSS

Hey friends, today in this blog we'll see how to create a glassmorphism login form using HTML and CSS. In our last blog, we saw how to create an awesome login form using HTML and CSS. Now it's time to create a glassmorphism login form using HTML and CSS. I've also shared many projects related to HTML, CSS, and Javascript. Don't forget to check these here.

Glassmorphism Login Form is currently gaining much popularity for this beauty. CSS Glassmorphism is a UI design that is basically like a transparent design.

However, in this case, the background is semi-transparent and slightly blurred. You will see different types of websites and applications using this type of design. Currently, Apple, Windows, and many other websites use this type of design.

In this blog, I'll share this awesome transparent login form. We have a login in the middle of the page as you can see in the image with two circles on the top-left corner and the bottom-right corner with gradient colors.

Preview is available here.

Source Code

HTML Code

<!-- --------------- Created By InCoder --------------- -->
<!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 Form - InCoder</title>
  <link rel="stylesheet" href="main.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>

CSS Code

/* --------------- Created By InCoder ---------------  */

* {
  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;
}

Blog

Glassmorphism login Form using HTML and CSS

Ashutosh Tiwari

Source Code

HTML Code

CSS Code

Join Our Newsletter. No Spam, Only the good stuff.

Related