Glassmorphism Login Form using Html & CSS | Devhubspot

form Login CSS Html javascript glassmorphism

Hey friends, today in this blog, you’ll learn how to create a Glassmorphism login form Effect. If you’re an absolute beginner.

Steps For Creating Glassmorphism Login Form using Html & CSS

To create a To-Do using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file to create a basic layout for the To-Do.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Login Form Glassmorphism</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div class="background">
            <div class="shape"></div>
            <div class="shape"></div>
        </div>
        <form>
            <h3>
                SignIn <span>Login to your account.</span>
            </h3>
            <label for="username">Username</label>
            <input type="text" placeholder="Enter username" id="username" />

            <label for="password">Password</label>
            <input type="password" placeholder="Enter minimum 6 characters" id="password" />

            <button>Sign In</button>
        </form>
    </body>
</html>

Next, add the following CSS codes to your style.css file to style the captcha generator and make it interactive and beautiful.

*,
*::before,
*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background: #1b1a1a;
}

.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}

.shape:first-child{
    background: linear-gradient(
        rgb(217, 30, 133),
        rgb(217, 39, 167)
    );
    right: -80px;
    top: -80px;
}

.shape:last-child{
    background: linear-gradient(
        to right,
        rgb(22, 82, 223),
        rgb(8, 104, 163)
    );
    left: -80px;
    bottom: -80px;
}

form{
    height: 520px;
    width: 430px;
    background: rgba(255, 255, 255, 0.07);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
}

form *{
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}

form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
}
form h3 span{
    display: block;
    font-size: 16px;
    font-weight: 300;
    color: #e5e5e5;
}

label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}

input{
    display: block;
    height: 50px;
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}

::placeholder{
    color: #e5e5e5;
}

button{
    margin-top: 50px;
    width: 100%;
    background: #ffffff;
    color: #1b1a1a;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

Conclusion

With HTML and CSS, I aim to show you how to create your own Glassmorphism Login Form using Html & CSS. You may modify your generator to suit your demands because the coding procedure is straightforward and simple to grasp.