Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - Login Form - How to make Dynamic Glassmorphism Login Form using HTML & CSS
    Login Form

    How to make Dynamic Glassmorphism Login Form using HTML & CSS

    Coding StellaBy Coding Stella14 August 2024No Comments4 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a Glassmorphism Login Form using HTML and CSS. This project will feature a modern, glass-like effect for a login form, giving it a sleek and elegant appearance.

    We’ll use HTML to structure the form and CSS to style it, applying the glassmorphism effect with a combination of transparency, blur, and subtle shadows.

    Let’s get started on building the Glassmorphism Login Form. Whether you’re a beginner or an experienced developer, this project offers a great opportunity to practice your web design skills and create a visually stunning, modern interface. Let’s dive in!

    HTML :

    This HTML code creates a glassmorphism-style login form. It uses a wrapper div to contain the form elements, which include fields for email and password, a “Remember me” checkbox, a “Forgot password?” link, and a submit button. There’s also a prompt at the bottom for users to register if they don’t have an account. The form is styled externally with CSS, linked via style.css, giving it a sleek, modern appearance with a glass-like, semi-transparent background.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Glassmorphism Login Form</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="wrapper">
        <form action="#">
          <h2>Login Form</h2>
            <div class="input-field">
            <input type="text" required>
            <label>Enter your email</label>
          </div>
          <div class="input-field">
            <input type="password" required>
            <label>Enter your password</label>
          </div>
          <div class="forget">
            <label for="remember">
              <input type="checkbox" id="remember">
              <p>Remember me</p>
            </label>
            <a href="#">Forgot password?</a>
          </div>
          <button type="submit">Log In</button>
          <div class="register">
            <p>Don't have an account? <a href="#">Register</a></p>
          </div>
        </form>
      </div>
    </body>
    </html>

    CSS :

    This CSS styles a webpage with a centered form on a full-screen background image. It uses the “Open Sans” font and applies a modern look with rounded corners, a blur effect on the form background, and smooth transitions for interactive elements like buttons. Input fields have floating labels that move when focused or filled, and there are white and gray color schemes for text, buttons, and links.

    @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("hero-bg.jpg"), #000;
      background-position: center;
      background-size: cover;
    }
    
    .wrapper {
      width: 400px;
      border-radius: 8px;
      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;
    }
    
    h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: #fff;
    }
    
    .input-field {
      position: relative;
      border-bottom: 2px solid #ccc;
      margin: 15px 0;
    }
    
    .input-field label {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      color: #fff;
      font-size: 16px;
      pointer-events: none;
      transition: 0.15s ease;
    }
    
    .input-field input {
      width: 100%;
      height: 40px;
      background: transparent;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
    }
    
    .input-field input:focus~label,
    .input-field input:valid~label {
      font-size: 0.8rem;
      top: 10px;
      transform: translateY(-120%);
    }
    
    .forget {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 25px 0 35px 0;
      color: #fff;
    }
    
    #remember {
      accent-color: #fff;
    }
    
    .forget label {
      display: flex;
      align-items: center;
    }
    
    .forget label p {
      margin-left: 8px;
    }
    
    .wrapper a {
      color: #efefef;
      text-decoration: none;
    }
    
    .wrapper a:hover {
      text-decoration: underline;
    }
    
    button {
      background: #fff;
      color: #000;
      font-weight: 600;
      border: none;
      padding: 12px 20px;
      cursor: pointer;
      border-radius: 3px;
      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);
    }
    
    .register {
      text-align: center;
      margin-top: 30px;
      color: #fff;
    }

    In conclusion, creating a Glassmorphism Login Form using HTML and CSS has been a creative and educational experience. By combining HTML for structure and CSS for the glassmorphism effect, we’ve designed a sleek and modern login form that stands out with its elegant appearance.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    animated login login form
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Neumorphic Social button using HTML & CSS
    Next Article How to make Responsive Navigation Menu Bar using HTML CSS & JS
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025
    HTML & CSS

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    HTML & CSS

    How to make Awesome Radar Animation using HTML & CSS

    8 May 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to Learn Web Development ??

    21 January 2024

    How to make Scroll Drive All The Things using HTML CSS & JavaScript

    28 April 2024

    How to Become a Full-Stack Web Developer?

    24 January 2024

    How to make Shoes Product Card Animation using HTML & CSS

    1 March 2025
    Latest Post

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood