How to Build a Modren Glassmorphism Login & Signup Form

Forms are one of the most important parts of any website. But let’s be honest… most login and signup forms look pretty boring.

In this tutorial, we’ll create something modern and eye-catching: a glassmorphism login & signup form with social buttons.

By the end of this, you’ll have a fully functional, responsive form that users will love. And the best part? You only need HTML, CSS, and a little JavaScript.

What We’re Building?

Here’s what our final form will have:

A glassmorphism effect will blurred background
Separate login and signup forms
A smooth toggle between the two forms
Social login buttons (Google & Facebook)
A responsive design that works on desktop and mobile

Step 1: Setup the HTML

First, let’s lay down the structure. We’ll need two forms:

Login Form: For existing users
SIgnup Form: For new users

Create a file called index.html and paste this inside:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Glassmorphism Login & Signup</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Background Circles -->
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>

  <!-- Form Container -->
  <div class="form-container" id="formBox">
 

    <!-- Login / Signup Forms -->
    <form id="loginForm" class="form active">
         <h2 id="formTitle">Login</h2>
      <input type="text" placeholder="Username" required />
      <input type="password" placeholder="Password" required />
      <button type="submit">Sign In</button>

      <div class="social-login">
        <button type="button" class="google-btn">
          <img src="https://cdn-icons-png.flaticon.com/512/281/281764.png" alt="Google"> Google
        </button>
        <button type="button" class="facebook-btn">
          <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook"> Facebook
        </button>
      </div>
      <p>Don't have an account? <a href="#" id="toggleForm">Sign up</a></p>
    </form>

    <form id="signupForm" class="form">
         <h2 id="formTitle">Signup</h2>
      <input type="text" placeholder="Username" required />
      <input type="email" placeholder="Email" required />
      <input type="password" placeholder="Password" required />
      <input type="password" placeholder="Confirm Password" required />
      <button type="submit">Sign Up</button>

      <div class="social-login">
        <button type="button" class="google-btn">
          <img src="https://cdn-icons-png.flaticon.com/512/281/281764.png" alt="Google">  Google
        </button>
        <button type="button" class="facebook-btn">
          <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook">  Facebook
        </button>
      </div>
      <p>Already have an account? <a href="#" id="toggleFormBack">Login</a></p>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>

This gives us all the fields, buttons, and social icons.

Step 2: Add the Glassmorphism CSS

Now it’s time to make it pretty. This is where the magic happens.

We’ll use CSS tricks like:

backdrop-filter: blur(10px): gives that frosted glass look
Round corners + shadows: soft, modern UI
Media queries: to make it mobile friendly

Create a file called style.css and paste this:

.body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2c2c2c;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* Background glowing circles */
.circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6a00, #ffcc00);
  filter: blur(4px);
  animation: float 6s ease-in-out infinite alternate;
}

.circle:nth-child(1) {
  width: 150px;
  height: 150px;
  top: 50px;
  left: 50px;
}
.circle:nth-child(2) {
  width: 100px;
  height: 100px;
  bottom: 60px;
  right: 80px;
  background: radial-gradient(circle, #ff3c00, #ffb100);
}
.circle:nth-child(3) {
  width: 80px;
  height: 80px;
  top: 100px;
  right: 120px;
}

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-30px); }
}

/* Glassmorphic form container */
.form-container {
  position: relative;
  width: 340px;
  padding: 35px 25px;
  border-radius: 25px;
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  color: white;
  z-index: 1;
}

h2 {
  margin-bottom: 20px;
  font-size: 22px;
  letter-spacing: 1px;
}

/* Forms */
.form {
  display: none;
  flex-direction: column;
  align-items: center;
}
.form.active {
  display: flex;
}

input {
  width: 85%;
  padding: 12px;
  margin: 8px 0;
  border: none;
  outline: none;
  border-radius: 8px;
}

button {
  width: 90%;
  padding: 12px;
  margin-top: 15px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(45deg, #ff6a00, #ffcc00);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
button:hover {
  opacity: 0.9;
}

/* Social buttons */
.social-login {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
  width: 100%;
}

.social-login button {
  flex: 1;
  background: #fff;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.social-login button img {
  width: 18px;
  height: 18px;
}


/* Links */
p {
  margin-top: 15px;
  font-size: 14px;
}
a {
  color: #ffcc00;
  text-decoration: none;
  font-weight: bold;
}

At this point, if you refresh your browser, you should see the form looking much more stylish.

Step 3: Add JavaScript for Form Switching

We don’t want two forms showing at the same time. Instead, when a user clicks “Create Account” or “Already have an account?”, well toggle between login and signup.

Create a file called script.js and paste this:

const loginForm = document.getElementById("loginForm");
const signupForm = document.getElementById("signupForm");
const toggleToSignup = document.getElementById("toggleForm");
const toggleToLogin = document.getElementById("toggleFormBack");

// Default: show login
loginForm.classList.add("active");

// Switch to signup
toggleToSignup.addEventListener("click", (e) => {
  e.preventDefault();
  loginForm.classList.remove("active");
  signupForm.classList.add("active");
});

// Switch back to login
toggleToLogin.addEventListener("click", (e) => {
  e.preventDefault();
  signupForm.classList.remove("active");
  loginForm.classList.add("active");
});

Now clicking the link will smoothly switch between login and signup.

Step 4: Make It Responsive

On desktops, our form looks beautiful in the center, but what about phones?

We’ll add mobile-friendly CSS that stacks everything neatly, so user on smaller screens don’t have to zoom in.

This way, no matter if you’re on a laptop, tablet, or phone – the form just works.

Final Thoughts

And that’s it! You’ve just built a Glassmorphism Login & Signup Form with Social Button.

It’s practical (something every website needs)
It’s beginner-friendly (only HTTML, CSS, and JS)
It’s modern & responsive (work everywhere)

Now you can take this project further – maybe add animations, change the background colors, or connect it with a backend.

1 Comment

vorbelutr ioperbir


September 29, 2025, 7:12 pm

Can I simply say what a relief to search out someone who truly knows what theyre speaking about on the internet. You undoubtedly know easy methods to bring a problem to light and make it important. Extra individuals must read this and perceive this facet of the story. I cant imagine youre not more well-liked because you definitely have the gift.