DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Glassmorphism Login Form using CSS in 2022
Code with Ayan
Code with Ayan

Posted on • Updated on

Glassmorphism Login Form using CSS in 2022

Β Hey Devs, Today in this post we’ll learn How to Create a Glassmorphism Login Form. To create it we are going to use simple CSS and HTML. Hope you enjoy this post. Β 

Β Glassmorphism CSS has been gaining much popularity as a result of its stunning appearance. It is very similar to Login Form but differs in its transparent design. Β Many websites and applications like Apple and Microsoft use this type of design.

These types of classy-interface UI make User Experience better and lead to increased sales, lead generation, and customer growth. You should also use shape psychology to represent your brand as trustworthy and build users' trust in your brand.

Demo

Click to watch demo!

Glassmorphism Login Form CSS 2022 (Source Code)

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Design - codewithayan</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <div class="container">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <form>
        <h2 id="heading">Login</h3>

        <input type="text" placeholder="Email or Phone" id="username">
        <input type="password" placeholder="Password" id="password">

        <button id="btn">Log In</button>

        <div class="social">
            <div class="Google"><i class="fab fa-google"></i>  Google</div>
            <div class="github"><i class="fab fa-github"></i>  Github</div>
        </div>
    </form>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #000000;
}
.container{
    width: 400px;
    height: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.circle{
    height: 174px;
    width: 175px;
    position: absolute;
    border-radius: 50%;
}
.circle:first-child{
    background: linear-gradient(
        #13e000,
        #78ff1e);
    left: -60px;
    top: -80px;
}
.circle:last-child{
    background: linear-gradient(
        to right,
        #ff00b3,
        #ff1fff);
    right: -20px;
    bottom: -80px;
}
form{
    height: 500px;
    width: 370px;
    background-color: rgba(255,255,255,0.13);
    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;
}
#heading{
    font-size: 40px;
    font-weight: 600;
    line-height: 42px;
    text-align: center;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    font-size: 18px;
    margin-top: 40px;
    border: none;
    outline: none;
}
input::placeholder{
    color: #e5e5e5;
}
#btn{
    margin-top: 40px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

.social{
    margin-top: 28px;
    display: flex;
  }
  .social div{
    width: 150px;
    border-radius: 3px;
    padding: 7px 10px 10px 7px;
    background-color: rgba(255,255,255,0.27);
    color: #eaf0fb;
    text-align: center;
  }
  .social div:hover{
    background-color: rgba(255,255,255,0.47);
  }
.github{
    margin-left: 25px;
  }
  .social i{
    margin-right: 4px;
  }
Enter fullscreen mode Exit fullscreen mode

Congratulations! You have now successfully created our Glassmorphism Login Form using HTML & CSS.

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.