DEV Community

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

Posted on

2 1

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

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more