Glassmorphism Login Form in HTML and CSS
Designing attractive and easily navigable login forms for websites is one of the typical challenges in user interface design. The Glassmorphism Login Form is a beautiful and functional option that could fit in almost any concept.
Being developed as a smooth glass piece with semi-transparent interface it represents the Glassmorphism effect, which is a new trend in UI designs.
The best part?
The complete source code for this Glassmorphism Login Form has been provided below in HTML and CSS, so feel free to copy this for your own projects!
GitHub Source: Glassmorphism Login Form
Features
- Easy to Customize – You only need to style and color it to match your brand without much effort.
- CMS Compatible Solution – Suitable to be integrated with WordPress, Joomla & Any other familiar modern CMS.
- Clean Code – The code is clean and documented well and that is why should not be a challenge for anyone to alter.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Video Tutorial
Steps to Build Form
- Organise Project Workspace – The first idea is to make a folder where all the assignments related to the project are to be kept.
- Build the form – In till now created project folder, build the HTML form using an HTML file named index.html.
- Develop style.css – Introduces a file of css for styling the Glassmorphism look and overall layout specifics.
- Copy & Paste – You can copy the following given codes in your files for making setup easily.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- HTML Document Declaration for defining HTML5 structure -->
<!-- Coding By JV Codes - www.jvcodes.com -->
<html lang="en">
<head>
<!-- Character encoding set to UTF-8 for universal characters -->
<meta charset="UTF-8">
<!-- Meta tag for responsive design, adjusts layout based on device width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title that appears on the browser tab -->
<title>Glassmorphism Login Form | JV Codes</title>
<!-- Link to external stylesheet where CSS for the form is defined -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Wrapper div to contain and style the login form with a glassmorphism effect -->
<div class="wrapper">
<!-- Form element with no action (leads to "#" when submitted) -->
<form action="#">
<!-- Form title for user identification -->
<h2>Login</h2>
<!-- Input field for email address -->
<div class="input-field">
<input type="text" required>
<label>Enter your email</label>
</div>
<!-- Input field for password -->
<div class="input-field">
<input type="password" required>
<label>Enter your password</label>
</div>
<!-- Section for "Remember me" checkbox and "Forgot password" link -->
<div class="forget">
<label for="remember">
<input type="checkbox" id="remember">
<p>Remember me</p>
</label>
<a href="#">Forgot password?</a>
</div>
<!-- Submit button for form submission -->
<button type="submit">Log In</button>
<!-- Registration link section for users who do not have an account -->
<div class="register">
<p>Don't have an account? <a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the form:
/* Import Google Font */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
/* Reset styles and set default font */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
/* Body styles for centering content and background setup */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 0 10px;
}
/* Background overlay for body */
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("https://images.unsplash.com/photo-1458869612855-bb6009d50368?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"), #000;
background-position: center;
background-size: cover;
}
/* Glassmorphism style for form wrapper */
.wrapper {
width: 400px;
border-radius: 8px;
padding: 30px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Form layout as a vertical column */
form {
display: flex;
flex-direction: column;
}
/* Header style for form title */
h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #fff;
}
/* Style for input field container */
.input-field {
position: relative;
border-bottom: 2px solid #ccc;
margin: 15px 0;
}
/* Label styling, with animation for floating effect */
.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 styling for text and password fields */
.input-field input {
width: 100%;
height: 40px;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
}
/* Label animation when input is active or filled */
.input-field input:focus~label,
.input-field input:valid~label {
font-size: 0.8rem;
top: 10px;
transform: translateY(-120%);
}
/* Section for "Remember me" and "Forgot password" */
.forget {
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px 0 35px 0;
color: #fff;
}
/* Checkbox styling */
#remember {
accent-color: #fff;
}
/* Label styling within "Remember me" section */
.forget label {
display: flex;
align-items: center;
}
/* Margin adjustment for "Remember me" text */
.forget label p {
margin-left: 8px;
}
/* Link styling for "Forgot password" and registration link */
.wrapper a {
color: #efefef;
text-decoration: none;
}
/* Hover effect for links */
.wrapper a:hover {
text-decoration: underline;
}
/* Button styling for submit action */
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;
}
/* Hover effect for button */
button:hover {
color: #fff;
border-color: #fff;
background: rgba(255, 255, 255, 0.15);
}
/* Registration link section styling */
.register {
text-align: center;
margin-top: 30px;
color: #fff;
}
Download Source Code
This Glassmorphism Login Form source code is provided without any copyright issues, and you can download it. Simply click on the download button and may start using it instantly.
Conclusion
Feel free to incorporate this code in your site’s layout and design and kindly give credit to JV Codes with a link back. If you have any further questions, please don’t hesitate to give your comment here; I’ll be glad to help. Don’t forget to like the video and subscribe for more helpful tutorials!
This Glassmorphism effect is super clean and modern! I love how you’ve broken down the code, jvcodes. I was wondering, have you ever considered doing a tutorial on how to integrate this seamlessly with a popular JavaScript framework like React or Vue?