Login forms are one of the most important UI components in any web application. A modern design can make the authentication process feel more engaging and professional. In this tutorial, we’ll build a glassmorphism login form using HTML, CSS and JavaScript.
This glassmorphism login form will feature floating labels, a show/hide password toggle and alternative login buttons for social accounts. A stylish background image completes the overall aesthetic.
HTML Structure
The HTML markup for this glassmorphism login form is organized into three main parts:
<div class="main-container">
<div class="form-wrapper">
<div class="form-title">Login</div>
<form>
<div class="field">
<input class="inp" type="text" id="username" required autocomplete="off">
<label class="label" for="username">Username</label>
<span class="bi bi-person"></span>
</div>
<div class="field">
<input class="inp" type="password" id="password" required>
<label class="label" for="password">Password</label>
<span class="toggle-pass bi bi-eye"></span>
</div>
<div class="action">
<label for="save-info">
<input type="checkbox" id="save-info">
Stay signed in</label>
<a href="#">Need help signing in?</a>
</div>
<input type="submit" value="Login" id="login-btn">
</form>
<div class="separator">or</div>
<div class="alternative">
<button class="bi bi-twitter-x"></button>
<button class="bi bi-pinterest"></button>
<button class="bi bi-google"></button>
<button class="bi bi-facebook"></button>
<button class="bi bi-discord"></button>
</div>
<div class="bottom">Not a member yet? <a href="#">Register Here</a></div>
</div>
<div class="bg"></div>
</div>- Form Wrapper – Contains the title, form fields, login button, social login section and bottom link to registration.
- Form Fields – Includes the username and password fields. Each field uses an input, a floating label and an icon. The password field also comes with a toggle icon to show or hide the entered password.
- Alternative Options – Provides links for “Stay signed in,” “Need help signing in?” and social login buttons for platforms like Twitter, Pinterest, Google, Facebook and Discord.
This clean structure ensures a logical flow for users and leaves room for future enhancements.
CSS Styling
The CSS applies a glassmorphism-inspired design, making the login form look modern and sleek:
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
.main-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-width: 500px;
}
a {
text-decoration: none;
color: rgb(165, 255, 172);
}
a:hover {
text-decoration: underline;
}
.form-wrapper {
width: 420px;
z-index: 1;
color: white;
text-align: center;
border-radius: 10px;
font-family: 'Calibri';
padding: 20px 20px 5px;
backdrop-filter: blur(12px);
border: 1px solid #ffffff4f;
box-shadow: 0px 0px 20px 0px #00000070;
}
.form-title {
font-size: 30px;
}
.field {
position: relative;
margin-top: 45px;
}
.field .bi {
position: absolute;
right: 5px;
bottom: 5px;
color: #e3e3e3;
}
.toggle-pass {
cursor: pointer;
}
form input {
background-color: transparent;
border: none;
}
.inp {
width: 100%;
color: white;
font-size: 16px;
caret-color: white;
outline: none;
padding: 0 25px 5px 0;
border-bottom: 1px solid #ffffff54;
}
.label {
position: absolute;
left: 0px;
bottom: 5px;
z-index: -1;
color: white;
transition: transform .3s ease-in-out, color .3s ease-in-out, font-size .3s ease-in-out;
}
.inp:focus~label,
.inp:valid~label {
transform: translateY(-25px);
font-size: 15px;
color: #c3c3c3;
}
.action {
display: flex;
justify-content: space-between;
font-size: 15px;
color: #dddddd;
user-select: none;
margin-top: 10px;
}
.action label {
display: flex;
gap: 5px;
cursor: pointer;
}
#save-info {
cursor: pointer;
}
#login-btn {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.089);
width: 100%;
color: white;
border-radius: 5px;
margin-top: 40px;
font-size: 18px;
font-family: 'Calibri';
padding: 5px 0;
}
.separator {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 30px;
}
.separator::before,
.separator::after {
content: '';
background: #ffffff4f;
width: 40%;
height: 1px;
}
.alternative {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 15px;
}
.alternative button {
border: none;
font-size: 14px;
height: 40px;
width: 40px;
border-radius: 8px;
cursor: pointer;
background: #00000033;
color: #f0f0f0;
}
#login-btn:hover,
.alternative button:hover {
opacity: 0.8;
}
.bottom {
margin-top: 35px;
font-size: 15px;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.8;
background-image: url('https://i.ibb.co/PwVxBRv/synthwave-mountain-landscape-2wojx795r0mkqjbz.jpg');
background-size: cover;
background-repeat: no-repeat;
}- Layout & Background – The form is centered both vertically and horizontally. The background uses a fixed, full-screen synthwave mountain wallpaper, slightly dimmed with opacity to highlight the form.
- Form Wrapper – Features a semi-transparent backdrop, subtle blur effect, rounded corners and a soft box shadow for depth.
- Floating Labels – Labels slide up when the user focuses on an input or types a value. This creates a neat, space-saving effect.
- Form Fields & Icons – Inputs are minimalistic, with no borders except a bottom line. Bootstrap icons (
bi) are used for username and password, while the password field includes an eye icon toggle. - Actions Section – Provides a “Stay signed in” checkbox on the left and a “Need help signing in?” link on the right.
- Login Button – A full-width, semi-transparent button styled to match the glass effect, with hover opacity changes.
- Separator & Social Buttons – A divider with “or” separates standard login from social login options. Social buttons are styled as square, rounded, minimal icons.
- Bottom Section – A small text with a link guiding users to registration.
All styles combine to create a futuristic, clean and responsive glassmorphism login form.
JavaScript Functionality
A minimal JavaScript snippet is used to make the password toggle interactive:
const input = document.querySelector('#password');
const icon = document.querySelector('.toggle-pass');
icon.addEventListener('click', () => {
icon.classList.toggle('bi-eye-slash');
icon.classList.toggle('bi-eye');
input.type = (input.type === 'password') ? 'text' : 'password';
});- Event Listener on Eye Icon – When clicked, the eye icon switches between
bi-eyeandbi-eye-slashclasses. - Password Visibility Toggle – The input field alternates between
passwordandtexttype, allowing users to either hide or reveal their password.
This small enhancement improves usability while keeping the code lightweight.
This login form combines modern glassmorphism styling with practical features like floating labels, a password toggle, social login buttons and responsive design. It’s perfect for web apps, portfolios or any project that requires a polished authentication UI.
You can take this further by:
- Adding form validation with JavaScript.
- Integrating backend authentication (PHP, Node.js, etc.).
- Expanding the social login buttons with OAuth support.
- Making the form responsive for mobile devices.
With this foundation, you now have a stylish and glassmorphism login form UI that stands out in any project.
