Glassmorphism Login Form by using html and css

Creating a glassmorphism login form using HTML and CSS involves several steps. Glassmorphism is a design trend that combines frosted glass-like elements with a semi-transparent background. Here's a step-by-step guide to creating one:

Step 1: Set Up Your HTML Structure Start by creating the basic HTML structure for your login form. Here's a simple example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glassmorphism Login Form by using html and css | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="glass">
        <form action="#">
          <h3>Login</h3>
            <div class="login-input-field">
            <input type="text" required>
            <label>Email</label>
          </div>
          <div class="login-input-field">
            <input type="password" required>
            <label>Password</label>
          </div>
          <div class="forget-pwd">
            <label for="rem-me">
              <input type="checkbox" id="rem-me">
              <p>Remember me</p>
            </label>
            <a href="#">Forgot password?</a>
          </div>
          <button type="submit">Log In</button>
          <div class="signup">
            <p>Don't have an account? <a href="#">Signup</a></p>
          </div>
        </form>
      </main>
  </body>
</html>

Step 2: Create the CSS Styles Now, you need to create a CSS file (styles.css) to style your login form with the glassmorphism effect. Here's an example:


      @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Open Sans", sans-serif;
      }
      
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        padding: 0 10px;
      }
      
      body::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("https://www.assignmenthippo.com/images/banner/footer3.jpg"), #000000;
        background-position: center;
        background-size: cover;
      }
      
      .glass {
        width: 400px;
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
      }
      
      form {
        display: flex;
        flex-direction: column;
      }
      
      h3 {
        font-size: 2rem;
        margin-bottom: 20px;
        color: #fff;
      }
      
      .login-input-field {
        position: relative;
        border-bottom: 2px solid #ccc;
        margin: 15px 0;
      }
      
      .login-input-field label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        color: #fff;
        font-size: 16px;
        pointer-events: none;
        transition: 0.15s ease;
      }
      
      .login-input-field input {
        width: 100%;
        height: 40px;
        background: transparent;
        border: none;
        outline: none;
        font-size: 16px;
        color: #fff;
      }
      
      .login-input-field input:focus~label,
      .login-input-field input:valid~label {
        font-size: 0.8rem;
        top: 10px;
        transform: translateY(-120%);
      }
      
      .forget-pwd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 25px 0 35px 0;
        color: #fff;
      }
      
      #rem-me {
        accent-color: #fff;
      }
      
      .forget-pwd label {
        display: flex;
        align-items: center;
      }
      
      .forget-pwd label p {
        margin-left: 8px;
      }
      
      .glass a {
        color: #efefef;
        text-decoration: none;
      }
      
      .glass a:hover {
        text-decoration: underline;
      }
      
      button {
        background: #fff;
        color: #000;
        font-weight: 600;
        border: none;
        padding: 12px 20px;
        cursor: pointer;
        border-radius: 40px;
        font-size: 16px;
        border: 2px solid transparent;
        transition: 0.3s ease;
      }
      
      button:hover {
        color: #fff;
        border-color: #fff;
        background: rgba(255, 255, 255, 0.15);
      }
      
      .signup {
        text-align: center;
        margin-top: 30px;
        color: #fff;
      }

This CSS code creates the glassmorphism effect with a frosted glass background and translucent form elements.

Step 3: Add Background Image Replace 'background.jpg' in the CSS with the path to your desired background image.

Step 4: Customize as Needed You can customize the colors, fonts, and other styles to match your design preferences.

That's it! You now have a glassmorphism login form created using HTML and CSS. You can further enhance it by adding JavaScript for form validation or additional features as needed.

View Demo

Submit Your Question Now