Dear friends in this article we will tell you How to make Glasmorphism Login Form Using HTML, CSS 2022?. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to the search bar and type article name then you can find easily more interested articles.
Friends, in this article, we will tell you how to design the Glasmorphism login form, so let’s know. First of all, you have to download a code editor like Notepad++, Sublime and Visual Studio Code. We have designed this Glasmorphism login form in Visual Studio Code. You can also download and use this editor, it will be very helpful for you.
HTML
Now we have to open our code editor and create a new file by right clicking which will be of html then in that file you have to write the basic syntax of html. After that, in the body tag, take a div with a class and name that class as form for Glasmorphism login form, something like this.
<div class="card">
<h3>Login Page</h3>
<input type="text" placeholder="User"><br><br>
<input type="password" placeholder="Password"><br><br>
<button>LOG IN</button>
<div class="social-icons">
<div class="fb"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></div>
<div class="insta"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
<div class="tw"><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
<div class="yt"><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></div>
</div>
</div>
<div class="circle1"></div>
<div class="circle2"></div>CSS
Friends, we have written the code of the css that we have used to design the Glasmorphism login form in this article, in the same html file, if you want, you can create a new style file for it and add the code to that file. Can be kept inside, then that file has to be linked in the html file.
CSS Code.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
}
.circle1{
position: fixed;
top: 5%;
left: 30%;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(to left, rgb(255, 0, 106),rgb(195, 0, 255));
z-index: -1;
}
.circle2{
position: fixed;
bottom: 5%;
right: 30%;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(to left, rgb(255, 217, 0),rgb(255, 123, 0));
z-index: -1;
}
.card{
width: 300px;
height: 400px;
padding: 30px 20px;
background-color: rgba(124, 124, 124, 0.205);
backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.377);
}
.card h3{
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
font-family: sans-serif;
color: #fff;
}
.card input{
width: 100%;
height: 30px;
outline: none;
padding-left: 5px;
}
.card button{
width: 100%;
height: 40px;
outline: none;
background-color: #fff;
color: #000;
margin-top: 20px;
font-weight: bold;
letter-spacing: 1px;
transition: 0.4s;
border: none;
cursor: pointer;
}
.card button:hover{
background-color: rgb(255, 0, 76);
color: #FFF;
}
.card .social-icons{
justify-content: center;
align-items: center;
display: flex;
margin-top: 40px;
}
.social-icons .fb{
width: 40px;
height: 40px;
background-color: rgb(0, 132, 255);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.fb a{
text-decoration: none;
color: #fff;
}
.social-icons .insta{
width: 40px;
height: 40px;
background-color: rgb(255, 0, 76);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
.insta a{
text-decoration: none;
color: #fff;
}
.social-icons .tw{
width: 40px;
height: 40px;
background-color: rgb(0, 225, 255);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
.tw a{
text-decoration: none;
color: #fff;
}
.social-icons .yt{
width: 40px;
height: 40px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
.yt a{
text-decoration: none;
color: #fff;
}
