How to Make a Modern Glassmorphism Login Form using HTML and CSS

Coder Abhijit
CSS
April 12, 2025

Hey there! If you're new to coding and want to create a sleek, modern login form with a glassmorphism effect, you're in the right place. In this guide, I’ll walk you through the steps to design a stylish glassmorphism login form using just HTML and CSS.

What is Glassmorphism?

Before we jump into the code, let me explain what glassmorphism is in simple words.

Glassmorphism is a modern design style that makes parts of a webpage look like blurry, see-through glass. It usually includes:

A transparent background with a blur effect
Soft shadows
Light borders
Bright text or elements on top

It’s clean, minimal, and looks futuristic — and it’s super popular right now.

Step-by-Step: Modern Glassmorphism Login Form using HTML and CSS

Step 1: Setting Up the HTML Structure

First, we’ll create the basic structure of our login form using HTML.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Glassmorphism Login Form - Coder Abhijit</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="wrapper">

  <div class="login-box">
    <form action="">
      <h2>Login</h2>

      <div class="input-box">
        <span class="icon">
          <ion-icon name="mail"></ion-icon>
        </span>
        <input type="email" required>
        <label>Email</label>
      </div>

      <div class="input-box">
        <span class="icon">
          <ion-icon name="lock-closed"></ion-icon>
        </span>
        <input type="password" required>
        <label>Password</label>
      </div>

      <div class="remember-forgot">
        <label><input type="checkbox"> Remember me</label>
        <a href="#">Forgot Password?</a>
      </div>

      <button type="submit">Login</button>

      <div class="register-link">
        <p>Don't have an account? <a href="#">Register</a></p>
      </div>
    </form>
  </div>

</div>

</body>
</html>

Step 2: Styling with CSS (Glassmorphism Effect)

Now, let’s make it look frosted glass-like using CSS.

Create a file named style.css and add the following:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Montserrat', sans-serif;
}
.wrapper {
  display:flex;
  justify-content:center;
  align-items: center;
  height:100vh;
  width:100%;
  background:url('https://codingstella.com/wp-content/uploads/2024/01/download-7.jpeg') no-repeat;
  background-size:cover;
  background-position:center;
}

.login-box {
  position: relative;
  width: 407px;
  height: 455px;
  background: transparent;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.5);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10 rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}
h2 {
  font-size:2em;
  color:#fff;
  text-align:center;
}
.input-box {
  position:relative;
  width:310px;
  margin:30px 0;
  border-bottom:1px solid #fff;
}
.input-box label {
  position:absolute;
  top:50%;
  left:5px;
  transform:translateY(-50%);
  font-size:1em;
  color:#fff;
  pointer-events:none;
  transition:.5s;
}
.input-box input:focus  ~ label,
.input-box input:valid  ~ label {
  top:-5px;
}
.input-box input {
  width:100%;
  height:50px;
  background:transparent;
  border:none;
  outline:none;
  font-size:1em;
  color:#fff;
  padding:0 35px 0 5px;
}
.input-box .icon {
  position:absolute;
  right:8px;
  top:50%;
  color: #fff;
  transform: translateY(-50%);
}
.remember-forgot {
  margin:-15px 0 15px;
  font-size:.9em;
  color:#fff;
  display:flex;
  justify-content:space-between;
}
.remember-forgot label input {
  margin-right:3px;
}
.remember-forgot a {
  color:#fff;
  text-decoration:none;
}
.remember-forgot a:hover {
  text-decoration:underline;
}
button {
  width:100%;
  height:40px;
  background-color:#fff;
  border:none;
  border-radius:40px;
  cursor:pointer;
  font-size:1em;
  color:#000;
  font-weight:500;
}
.register-link {
  font-size:.9em;
  color:#fff;
  text-align:center;
  margin:25px 0 10px;
}
.register-link p a {
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
.register-link p a:hover {
  text-decoration:underline;
}
@media (max-width:500px) {
  .login-box {
    width:100%;
    height:100vh;
    border:none;
    border-radius:0;
  }
  .input-box {
    width:290px;
  }
}

And that’s it! You’ve just created a modern glassmorphism login form using HTML and CSS.

This effect is great for:

Portfolio projects
Modern websites
UI/UX design practice

If you want to customize it further, try:

Changing the background gradient
Adjusting the blur intensity
Adding animations

Hope you enjoyed this tutorial! Let me know in the comments if you have any questions. Happy coding!

Download Code

Coder Abhijit

Hello, I'm Coder Abhjit, I am a developer. I have skills in HTML, CSS, JavaScript, Node.js, React.js, & Python. Whatever knowledge I have I am teaching you.

Your email adress will not be published, Requied fileds are marked*.

How to Make a Modern Glassmorphism Login Form using HTML and CSS

Table of Contents

What is Glassmorphism?