Glassmorphism Login Form Html Css | Glassmorphism Form HTML
Welcome🎉 to Code With Random blog. In this blog, we will explore how to create Glassmorphism Login Form. We will use HTML & CSS for this Glassmorphism Form.
Hope you enjoy our blog so let's start with a basic HTML structure for Glassmorphism Login Form.
HTML code for Glassmorphism Login Form
<section>
<div class="colour"></div>
<div class="colour"></div>
<div class="colour"></div>
<div class="box">
<div class="square" style="--i:0;"></div>
<div class="square" style="--i:1;"></div>
<div class="square" style="--i:2;"></div>
<div class="square" style="--i:3;"></div>
<div class="square" style="--i:4;"></div>
<div class="container">
<div class="form">
<h2>Login Form</h2>
<form>
<div class="input__box">
<input type="text" placeholder="Username">
</div>
<div class="input__box">
<input type="password" placeholder="Password">
</div>
<div class="input__box">
<input type="submit" value="Login">
</div>
<p class="forget">Forgot Password? <a href="#">Click Here</a></p>
<p class="forget">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</div>
</div>
</section>
Output
CSS for Glassmorphism Login Form
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
overflow: hidden;
}
section {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #f7f7fe, #dff1ff);
}
section .colour {
position: absolute;
filter: blur(150px);
}
section .colour:nth-child(1) {
top: -350px;
width: 600px;
height: 600px;
background: #bf4ad4;
}
section .colour:nth-child(2) {
left: 100px;
width: 500px;
height: 500px;
bottom: -150px;
background: #ffa500;
}
section .colour:nth-child(3) {
right: 100px;
bottom: 50px;
width: 300px;
height: 300px;
background: #2b67f3;
}
.box {
position: relative;
}
.box .square {
position: absolute;
border-radius: 10px;
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.1);
animation-delay: calc(-1s * var(--i));
animation: animate 10s linear infinite;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
@keyframes animate {
0%,
100% {
transform: translateY(-40px);
}
50% {
transform: translateY(40px);
}
}
.box .square:nth-child(1) {
top: -50px;
left: -60px;
width: 100px;
height: 100px;
}
.box .square:nth-child(2) {
z-index: 2;
top: 150px;
left: -100px;
width: 120px;
height: 120px;
}
.box .square:nth-child(3) {
z-index: 2;
width: 80px;
height: 80px;
right: -50px;
bottom: -60px;
}
.box .square:nth-child(4) {
left: 100px;
width: 50px;
height: 50px;
bottom: -80px;
}
.box .square:nth-child(5) {
top: -80px;
left: 140px;
width: 60px;
height: 60px;
}
.container {
width: 400px;
display: flex;
min-height: 400px;
position: relative;
border-radius: 10px;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.form {
width: 100%;
height: 100%;
padding: 40px;
position: relative;
}
.form h2 {
color: #fff;
font-size: 24px;
font-weight: 600;
position: relative;
letter-spacing: 1px;
margin-bottom: 40px;
}
.form h2::before {
left: 0;
width: 80px;
height: 4px;
content: "";
bottom: -10px;
background: #fff;
position: absolute;
}
.form .input__box {
width: 100%;
margin-top: 20px;
}
.form .input__box input {
width: 100%;
color: #fff;
border: none;
outline: none;
font-size: 16px;
padding: 10px 20px;
letter-spacing: 1px;
border-radius: 35px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.form::placeholder {
color: #fff;
}
.form .input__box input[type="submit"] {
color: #666;
cursor: pointer;
background: #fff;
max-width: 100px;
font-weight: 600;
margin-bottom: 20px;
}
.forget {
color: #fff;
margin-top: 5px;
}
.forget a {
color: #fff;
font-weight: 600;
text-decoration: none;
}
Now we have completed our CSS section, Here is our updated output CSS.
output
Check it more
HTML - CSS project ideas by Code With Random
calculator Html javascript | calculator javascript code
bootstrap navbar - responsive bootstrap navbar
notification CSS style | Html top bar slide down notification CSS
CSS responsive menu | CSS animated Menu
countdown timer HTML javascript | free countdown timer
A Custom checkbox in CSS? | Create a custom checkbox using CSS?
Now we have completed our CSS section, Here is our updated output with CSS. Hope you like Glassmorphism Login Form, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
In this post, we learn how to create a Glassmorphism Login Form using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Post a Comment