A login form with password toggle built with pure HTML and CSS that allows users to switch password visibility. It enhances input usability and authentication clarity within secure login interfaces.
Usage
Use this component when interfaces require password visibility control, such as login forms, registration pages, or authentication panels where users benefit from verifying their input.
Implementation
The toggle behavior is implemented using CSS state selectors and controlled input visibility techniques, allowing the password field to switch between masked and visible states without JavaScript.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form class="login-card">
<h2>Welcome Back</h2>
<p class="subtitle">Login to your account</p>
<div class="input-box">
<input type="email" required>
<label>Email</label>
</div>
<div class="input-box password-box">
<input type="password" id="password" required>
<label>Password</label>
<span class="toggle" onclick="togglePassword()">👁</span>
</div>
<button class="login-btn">Login</button>
</form>
</div>
<script>
function togglePassword() {
const input = document.getElementById("password");
input.type = input.type === "password" ? "text" : "password";
}
</script>
</body>
</html>CSS
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #4facfe, #00f2fe);
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
width: 320px;
padding: 30px;
border-radius: 20px;
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
color: #fff;
text-align: center;
}
.login-card h2 {
margin-bottom: 5px;
}
.subtitle {
font-size: 14px;
margin-bottom: 20px;
opacity: 0.8;
}
.input-box {
position: relative;
margin-bottom: 20px;
}
.input-box input {
width: 100%;
padding: 12px 10px;
border: none;
outline: none;
border-radius: 8px;
background: rgba(255,255,255,0.2);
color: #fff;
font-size: 14px;
}
.input-box label {
position: absolute;
left: 10px;
top: 12px;
font-size: 14px;
color: #eee;
pointer-events: none;
transition: 0.3s ease;
}
.input-box input:focus + label,
.input-box input:valid + label {
top: -8px;
left: 8px;
font-size: 11px;
background: rgba(0,0,0,0.3);
padding: 2px 6px;
border-radius: 5px;
}
.password-box {
position: relative;
}
.toggle {
position: absolute;
right: 10px;
top: 12px;
cursor: pointer;
}
.login-btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 10px;
background: #ffffff;
color: #333;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
.login-btn:hover {
background: #ddd;
transform: translateY(-2px);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Supports password visibility toggle
- Enhances user input accuracy
- Fully responsive across breakpoints
- Suitable for login and registration forms
- Easy to customize toggle icon and styling
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.