Create A Glassmorphism Login Form in HTML and CSS

Glassmorphism is a design trend that has gained traction recently, known for its frosted glass-like appearance. When applied to a login page, it creates a sleek and modern user experience. The translucent background with subtle frosted glass effects provides a visually appealing and functional login interface.

for full Tutorial:-

Glassmorphism login pages feature a sense of depth and elegance. The login form stands out against a partially transparent, blurred background, giving a contemporary touch to the user interface. With frosted glass buttons and input fields, the design not only looks stylish but also enhances the overall user experience.

Glassmorphism successfully strikes a balance between aesthetics and functionality on login pages. It transforms the login process into an engaging and visually pleasing experience, adding an elegant and modern dimension to this essential element of user interaction.

Steps To Create Glassmorphism Login Form HTML & CSS

To create a Login Form with a glassmorphism effect using HTML and CSS, follow these simple instructions step-by-step:

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. These codes include essential HTML elements such as forms, input, links, buttons, and others. For basic form validation, I’ve also included the “required” attribute for the input fields.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <h1>Login</h1>
            <form action="">
                <div class="inputs">
                    <i class="fa-solid fa-user"></i>
                    <input type="text" required>
                    <label >Username</label>
                </div>
                <div class="inputs">
                    <i class="fa-solid fa-lock"></i>
                    <input type="password" required>
                    <label >Password</label>
                </div>
                <div class="rem-for">
                    <div class="rem">
                        <input type="checkbox">
                        <label for="">Remember me</label>
                    </div>
                    <div class="for">
                        <a href="#">Forget Password?</a>
                    </div>
                </div>
                <div class="login">
                    <button>Login</button>
                </div>
                <br>
                <p class="signup-text">----------------  Or Sign Up with  --------------</p>
                <br>
                <div class="links">
                    <div class="facebook"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
                    <div class="google"><a href=""><i class="fa-brands fa-google"></i></a></div>
                    <div class="twitter"><a href=""><i class="fa-brands fa-x-twitter"></i></a></div>
                </div>

            </form>
        </div>
    </div>
</body>
</html>


Next, add the following CSS codes to your style.css file to style our login form, along with the glassmorphism effect and floating label animation. These lines of code include various CSS properties like blur, background, background image, etc. to achieve the desired Glassmorphism effect.                                                                                                                                                  
*{
    padding:0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.container{
    width: 100%;
    height: 100vh;
    background-image:url('images/[fpdl.in]_mountain-landscape-with-river-mountains-background_866548-498_large.jpg') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 420px;
    width: 100%;
    height: 500px;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    border-radius: 10px;
    box-shadow:1px 1px 10px black;
}

.wrapper h1{
    color:white;
    text-align: center;
    margin: 10px 0;
    font-weight: 750;
}

.wrapper form{
    width: 80%;
    margin: 0 10%;
}

form .inputs{
    width: 100%;
    height: 6vh;
    border-radius: 5px;
    margin: 30px 0;
    border-bottom: 2px solid white;
}

.inputs input{
    outline: none;
    border: none;
    width: 100%;
    color:white;
    background-color: transparent;
    padding-left: 25px;
    height: 100%;
}

.inputs i,
.inputs label{
    pointer-events: none;
    margin-top: 15px;
    position: absolute;
}

.inputs label{
    color: white;
    left: 70px;
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.inputs input:focus~label,
.inputs input:valid~label{
    margin-top: -10px;
}

.rem-for{
    color: white;
    display: flex;
    justify-content: space-between;
    margin-top: -25px;
}

.rem-for .for a{
    font-size: 0.8rem;
    color: white;
    text-decoration: none;
}

.login{
    margin: 30px 0;
    width: 100%;
    height: 6vh;
}

.login button{
    width: 100%;
    font-size: 1.5rem;
    font-weight: 800;
    height: 100%;
    border-radius: 5px;
    border: none;
    color: rgb(20, 111, 111);
}

.login button:hover{
    background: rgba(1 ,1 ,90, 0.8);
    box-shadow: 0 0  10px rgb(25,25,120),0 0  30px rgb(25,25,120),0 0  50px rgb(25,25,120);
    color: white;
}



.signup-text{
    pointer-events: none;
    font-size: 1.1rem;
    margin-left: 2px;
    color: white;
    margin: 10px 0;
}

.links {
    width: 100%;
    height: 7vh;
    display: flex;
    justify-content: space-evenly;
}

.links div{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.links a{
    color: white;
    font-size: 1.4rem;
}

.links .facebook{
    background: linear-gradient(to bottom, rgb(47, 47, 251) , rgb(28, 28, 138));
}

.facebook:hover{
    box-shadow: 0 0 10px rgb(47, 47, 251), 0  0 30px rgb(47, 47, 251), 0 0 50px rgb(47, 47, 251);
}

.links .google{
    background: red;
}

.links .google:hover{
    box-shadow: 0 0 10px red, 0 0 30px red, 0 0 50px red;
}

.links .twitter{
    background-color: black;
}

.twitter:hover{
    box-shadow: 0  0 10px black, 0 0  30px black, 0 0  50px black;




Conclusion 

In conclusion, Glassmorphism offers a visually striking and modern design approach for login pages. Its frosted glass aesthetic, with translucent backgrounds and subtle blur effects, not only adds a touch of sophistication but also enhances the user experience. The balance between aesthetics and functionality makes Glassmorphism a compelling choice for creating engaging and visually pleasing login interfaces. By implementing this design trend, login pages are transformed from mere functional elements into elegant and contemporary components of the user journey, making a positive impression on users and providing a seamless login experience.

Search This Blog

procoder09

Create A Glassmorphism Login Form in HTML and CSS

Steps To Create Glassmorphism Login Form HTML & CSS

Comments

Post a Comment

Popular posts from this blog

Full Travel Responsive Website using html and css only | Source Code

Bus Ticket Booking System Website design using HTML and CSS

Make A Simple Shoes Website using HTML and CSS | Free Source Code