Blog

You are currently viewing Glassmorphism Login Form Using HTML and CSS Code

Glassmorphism Login Form Using HTML and CSS Code

Free Coding Ebook 👉 Get Now

Glassmorphism Login Form Using HTML and CSS Code

Welcome to the Codewithrandom blog. Today we are going to create a Glassmorphism Login Page Using HTML and CSS. this is a complete glass morphism design form with animation using only pure Css.

I hope you enjoy our blog so let’s start with a basic HTML structure for the Glassmorphism Login Form.

50+ HTML, CSS and JavaScript Projects With Source Code

Code by Md Aman
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies NO
Responsive YES

Live Preview Of Glassmorphism Login Form Login Page Using CSS

ADVERTISEMENT

Html Code For Glassmorphism Login Form

<!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 the HTML code for the Glassmorphism Login Form. Now, you can see output without CSS, then we write CSS for the Glassmorphism Login Form Design. Portfolio Website using HTML and CSS (Source Code) Output Glassmorphism Login Form Login Page Using HTML and CSS Code

CSS Code For Glassmorphism Login Form

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

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced) We have completed our CSS Code for Glassmorphism Login Form.

Final Output Of Glassmorphism Login Form Using Css

Glassmorphism Login Form Login Page Using HTML and CSS Code Glassmorphism Login Form Login Page Using HTML and CSS Code

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 Restaurant Website Using HTML and CSS Written by – Code With Random/Anki code by – Md Aman

Which code editor do you use for this Indian Flag coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

Free Coding Ebook 👉 Get Now

Tags: , ,

Leave a Reply