You might have come across the trendy Glassmorphism effects gracing login forms, cards, and various components across different websites. As an aspiring web developer, have you ever contemplated the prospect of crafting your very own Glassmorphism-inspired login form?
For those unfamiliar, glassmorphism represents a user interface design trend that weaves the enchanting illusion of translucent and softly blurred glass surfaces into the fabric of web elements. This captivating effect imparts a semi-transparent allure, elegantly merging the background with the foreground.
In this accessible and beginner-friendly blog post, I will expertly navigate you through the process of fashioning a Glassmorphism Login Form using nothing but HTML and CSS. Not only will you glean the art of shaping forms with a mesmerizing glass-like veneer, but you’ll also acquire the know-how to infuse them with an alluring floating-label animation.
preview
Steps To Create Glassmorphism Login Form Using HTML & CSS
To create Glassmorphism Login Form Using HTML & CSS you have to follow the steps which is mentioned bellow.
1: Create a folder . name whatever you want to give you can give. and create these files which is mentioned bellow.
2: Create index.html in main file and make sure your extention should be .html .
3: Create style.css in main file and make sure your extention should be .css .
4: you can use any image instead of iron man image but the image name should be codebyrolex.
5: here is the download link of iron man image
here is index.html
<!DOCTYPE html>
<!-- codebyrolex - www.codebyrolex.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Login Form | Codebyrolex</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="#">
<h2>Login</h2>
<div class="input-field">
<input type="text" required>
<label>Enter your email</label>
</div>
<div class="input-field">
<input type="password" required>
<label>Enter your password</label>
</div>
<div class="forget">
<label for="remember">
<input type="checkbox" id="remember">
<p>Remember me</p>
</label>
<a href="#">Forgot password?</a>
</div>
<button type="submit">Log In</button>
<div class="register">
<p>Don't have an account? <a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>here is style.css
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
/* codebyrolex - www.codebyrolex.com */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 0 10px;
}
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("codebyrolex.jpg"), #000;
background-position: center;
background-size: cover;
}
.wrapper {
width: 400px;
border-radius: 8px;
padding: 30px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
form {
display: flex;
flex-direction: column;
}
h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #fff;
}
.input-field {
position: relative;
border-bottom: 2px solid #ccc;
margin: 15px 0;
}
.input-field label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #fff;
font-size: 16px;
pointer-events: none;
transition: 0.15s ease;
}
.input-field input {
width: 100%;
height: 40px;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
}
.input-field input:focus~label,
.input-field input:valid~label {
font-size: 0.8rem;
top: 10px;
transform: translateY(-120%);
}
.forget {
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px 0 35px 0;
color: #fff;
}
#remember {
accent-color: #fff;
}
.forget label {
display: flex;
align-items: center;
}
.forget label p {
margin-left: 8px;
}
.wrapper a {
color: #efefef;
text-decoration: none;
}
.wrapper a:hover {
text-decoration: underline;
}
button {
background: #fff;
color: #000;
font-weight: 600;
border: none;
padding: 12px 20px;
cursor: pointer;
border-radius: 3px;
font-size: 16px;
border: 2px solid transparent;
transition: 0.3s ease;
}
button:hover {
color: #fff;
border-color: #fff;
background: rgba(255, 255, 255, 0.15);
}
.register {
text-align: center;
margin-top: 30px;
color: #fff;
}Final words
This post is about Glassmorphism Login Form Using HTML & CSS . hope you like it this post. if you have any problem then you can contact us or DM on instagram.
