DEV Community

Cover image for Glass morphism Login Form Using Pure HTML & CSS.
Technical Vandar
Technical Vandar

Posted on

Glass morphism Login Form Using Pure HTML & CSS.

Here is the glass morphism effect login form using pure HTML & CSS.

Source Code

HTML:


<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glass Morphism Login Form</title>
</head>

<body>
    <div class="container">
        <form action="" autocomplete="off">
            <div class="title">
                <h1>Login Here</h1>
            </div>
            <div class="email">
                <div class="icon-e">
                    <i class="fas fa-envelope"></i>
                </div>
                <input type="E-mail" name="email" id="email" placeholder="E-mail" required>
            </div><br>
            <div class="password">
                <div class="icon-p">
                    <i class="fas fa-lock" id="show"></i>
                </div>
                <input type="password" oninput="showHide()" name="password" id="password" placeholder="Password"
                    required>

            </div><br>
            <div class="forget-p">
                <a href="#">Forgot Password?</a>
            </div>
            <button type="submit">Login</button>
            <div class="sign-up">
                <a href="#">Sign Up</a>
            </div>
            <div class="other-items">
                <div class="h1">
                    <h1>Or</h1>
                </div>
                <hr>
                <div class="facebook">
                    <a href="#">
                        <i class="fab fa-facebook-square"></i>
                    </a>
                    <div class="text">
                        <a href="#">Facebook</a>
                    </div>
                </div>
                <div class="github">
                    <a href="#">
                        <i class="fab fa-github-square"></i>
                    </a>
                    <div class="text">
                        <a href="#">Github</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    const toggleBtn = document.querySelector('#show');
    const inp = document.querySelector('#password');

    toggleBtn.addEventListener('click', () => {
        const currentInputFieldType = inp.type;
        if (currentInputFieldType === "password") {
            inp.type = "text";
        }
        else {
            inp.type = "password";
        }
    })
</script>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: monospace;
}
body{
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(90deg, rgba(124,120,199,1) 0%, rgba(94,195,189,1) 14%, rgb(133, 141, 211) 47%, rgba(0,212,255,1) 72%);
}
.container{
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
    height: 70vh;
    width: 25vw;
    background: radial-gradient(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
}
form{
    margin-top: 100px;
    display: grid;
    place-items: center;
}
.title{
    text-align: center;
    margin-top: -105px;
    /* position: absolute; */
}
.title h1{
    font-size: 35px;
}
input{
    padding: 10px 45px;
    height: 40px;
    width: 300px;
    background-color: transparent;
    border: none;
    outline: none;
    background: rgba(0, 0, 0, 0.05);
    font-size: 20px;
}
button{
    height: 35px;
    width: 200px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 28px;
    cursor: pointer;
    margin-top: 20px;
    background-color: darkcyan;
    color: white;
}
.icon-e i{
    color: rgb(0, 217, 255);
    font-size: 25px;
    padding: 8px 10px;
    position: absolute;
}
.icon-p i{
    color: rgb(0, 217, 255);
    font-size: 25px;
    padding: 8px 10px;
    position: absolute;
}

.h1{
    text-align: center;
    border-radius: 50%;

    margin: 15px;
    height: 40px;
    width: 40px;
    background-color: aliceblue;
}
.h1 h1{
    color: teal;
    margin-left: 5px;
    position: absolute;
    margin-top:5px;
}
hr{
    margin-left: -145px;
    position: absolute;
    width: 355px;
}
.forget-p{
    text-align: right;
    position: initial;
}
.forget-p a{
    text-decoration: underline;
    margin-left: 195px;
    font-size: 20px;
    color: aqua;
}
.sign-up{
    font-size: 20px;
    margin-top: 10px;
}
.sign-up a{
    text-decoration: underline;
    color: aqua;
    margin-left: 225px;
}
.facebook{
    cursor: pointer;
    background-color: #3b5998;
    margin-left: -134px;
    margin-top: 45px;
    border: 1px solid rgb(226, 226, 226);
    height: 45px;
    width: 145px;
}
.github{
    cursor: pointer;
    position: absolute;
    background-color: #7743CE;
    margin-left: 45px;
    margin-top: -44px;
    border: 1px solid rgb(226, 226, 226);
    height: 45px;
    width: 145px;
}
.facebook a,
i{
    position: absolute;
    color: white;
    font-size: 30px;
    padding: 5px 5px;
}
.text a{

    color: white;
    position: absolute;
    margin: 7px 40px;
    font-size: 20px;
}
.github a,
i{
    position: absolute;
    color: white;
    font-size: 30px;
    padding: 5px 5px;
}
.text a{

    color: white;
    position: absolute;
    margin: 7px 40px;
    font-size: 20px;
}
.showHide{
    cursor: pointer;
    text-align: center;
    margin-left: 260px;
    margin-top: -40px;
    height: 40px;
    width: 40px;
    background-color: rgb(2, 255, 242);
    position: absolute;
}

.showHide img{
    margin: 5px 0;
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)