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>
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;
}
Top comments (0)