Glassmorphism Login Form using HTML & CSS

Glassmorphism Login Form using HTML & CSS

Hello developers, today in this blog you'll learn how to create a Glassmorphism Login Form using HTML & CSS.

The glass effect has been used in this login form. The Glassmorphism is used to emphasize light or dark objects, placed on top of colorful backgrounds. CSS backdrop-filter property has been used to blur the background. The Glassmorphism Login Form was created using only HTML & CSS.

In this blog (Glassmorphism Login Form) on the webpage, there is a login form at the center of the page. The login form consists of two input fields labeled Email and Password with a button login.

The source code of this Glassmorphism Login Form is given below, and you can copy the source code of this program. You can use this code of Glassmorphism Login Form with your creativity and can take this form to the subsequent level.

Glassmorphism Login Form [Source Code]

To make this website (Glassmorphism Login Form), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <title>Glassmorphism Login Form || Learningrobo</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="background"> <div class="shape"></div> <div class="shape"></div> </div> <form> <h3>Login Here</h3> <label for="username">Email</label> <input type="text" placeholder="Email" id="username"> <label for="password">Password</label> <input type="password" placeholder="Password" id="password"> <button>Log In</button> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </form> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #333;  
}
.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(to right top, #0b65ed, #009dff, #00c3e2, #00de86, #a8eb12);
    left: -80px;
    top: -80px;
}
.shape:last-child{
    background: linear-gradient(#f00,#f0f);
    right: -30px;
    bottom: -80px;
}
form{
    height: 500px;
    width: 400px;
    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;
}
form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}

label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: 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-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
.credit a{
  text-decoration: none;
  font-weight: 800;
  color: #00c3e2;
}
  
.credit {
  margin: 10px;
}
We hope you would like this Glassmorphism Login Form using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Glassmorphism Login Form using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome