Glassmorphism Login Form using Html & CSS

Glassmorphism Login Form using Html & CSS 2021

Coding BD given here Glassmorphism Login Form using Html & CSS | 2021. We create glassmorphism login form step by step. It is the most important part Of latest glass effect. We created a login form. We have given more importance to CSS Glassmorphism. We have used css background animation because they need high effects. Thank you so much.

Glassmorphism Login Form using Html & CSS

➡️Responsive website html css javascript | part( 1 ):

➡️ Responsive Services Section:

➡️ CSS Clip Path Hover Circle Hover Effects:

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021:

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border:

➡️ Responsive Box Model Web Design Using CSS Flexbox:

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript:

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021:

➡️Scroll top button :

➡️ Animated eid mubarak 2021 using Html CSS & Javascript:

Here is all Source code. You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">
    <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>Login Form</title>
    <link rel="stylesheet" href="style.css">
   <div class="main_content">
       <div class="box">
           <div class="img_box">
               <img src="./coffee_1.gif" alt="Coffee Cup">
           <form action="">
               <div class="form-group">
                   <label for="example">Name</label>
                   <input type="text" id="example" placeholder="Enter your name" required>
               <div class="form-group">
                <label for="example">Email</label>
                <input type="text" id="example" placeholder="Enter E-mail Address" required>
            <div class="form-group">
                <label for="example">Password</label>
                <input type="text" id="example" placeholder="Enter your Password" required>
            <div class="form-group">
                <label for="example">C-Password</label>
                <input type="text" id="example" placeholder="Enter your C-password" required>
            <div class="form-group">
                <input type="checkbox" id="example" required>
                <label for="example">I agree to Terms</label>
            <button type="submit">Login</button>
@import url('[email protected];400;500;600;800&display=swap');
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    width: 100%;
    height: 100vh;
    background: linear-gradient(#2c47b53d, #2c47b5c7), url('');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    position: relative;

.main_content {
    width: 500px;
    height: 510px;
    position: absolute;
    padding: 35px 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.825);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);

.box .img_box {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -12%;
    left: 36%;
    width: 150px;
    height: 150px;

.box .img_box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

    width: 100%;
    height: 100%;
    margin-top: 50px;

    padding: 5px 0;

    width: 100%;
    height: 42px;
    border: none;
    outline: none;
    padding: 5px 10px;
    background: #ddd;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;

    font-size: 14px;
    color: rgb(168, 145, 145);

    width: 100%;
    height: 100%;
    background: #F0EADA;
    font-size: 16px;
    color: #000;
    letter-spacing: 2px;
    font-weight:  700;
    transition: .5s;
    cursor: pointer;
    padding: 13px 30px;
    border: none;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;

    background: #BD9785;

You can download Free Image Here: Unsplash

Don’t Forget to Follow me on all Social Network


Facebook Page:



You can see Image Hover Effect

#codingbd #eidmubarak #htmlcss

One thought on “Glassmorphism Login Form using Html & CSS

  1. Annabelle Rollie says:

    Thanks, I’ve been searching for info about this topic for ages and yours is the best I have found so far.

Leave a Reply

Your email address will not be published. Required fields are marked *