How to Show Password in HTML with Eye Icon | Show/Hide Password Eye Icon HTML Tutorial
Want to add a show/hide password eye icon in your HTML form? In this guide, we’ll show you exactly how to implement a password eye icon that toggles visibility with a simple click. Whether you need an eye icon for password fields, or want to enhance your UX by allowing users to show password in HTML with eye icon, this tutorial has you covered.
With just HTML and JavaScript, you’ll create a fully responsive password input that includes:
- A show password eye icon
- A clean, modern password eye icon show and hide toggle
- Easy-to-integrate functionality for any form
- Mobile responsiveness and fast performance
If you’ve been searching for how to implement:
- eye icon password
- show password HTML
- show hide password eye icon HTML
This is the complete solution you need.
How to Add an Eye Icon for Password Field in HTML
Learn how to create a password input with an eye icon that allows users to toggle visibility using JavaScript. Below is the code you can use inside your form:
🌐 Modern Glow Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Password Toggle</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
background-size: 400% 400%;
animation: gradientBG 8s ease infinite;
margin: 0;
padding: 10px;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.password-container {
position: relative;
width: 100%;
max-width: 320px;
background: rgba(255, 255, 255, 0.1);
padding: 14px;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 238, 255, 0.5);
backdrop-filter: blur(10px);
border: 3px solid transparent;
animation: neonBorder 2s infinite alternate;
}
@keyframes neonBorder {
0% {
border-color: #00eaff;
box-shadow: 0 0 10px #00eaff;
}
100% {
border-color: #ff00ff;
box-shadow: 0 0 15px #ff00ff;
}
}
input {
width: 100%;
padding: 14px;
padding-right: 50px;
border: none;
border-radius: 8px;
font-size: 18px;
background: rgba(255, 255, 255, 0.2);
color: white;
outline: none;
}
.toggle-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
background: none;
border: none;
outline: none;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.toggle-btn svg {
width: 28px;
height: 28px;
fill: white;
transition: 0.3s ease-in-out;
}
.toggle-btn:hover svg {
transform: scale(1.1);
fill: #00eaff;
}
@media (max-width: 400px) {
.password-container {
padding: 12px;
}
input {
font-size: 16px;
padding: 12px;
}
.toggle-btn {
width: 36px;
height: 36px;
}
.toggle-btn svg {
width: 24px;
height: 24px;
}
}
</style>
</head>
<body>
<div class="password-container">
<input type="password" id="password" placeholder="Enter password">
<button class="toggle-btn" onclick="togglePassword()" aria-label="Toggle password visibility">
<svg id="eyeIcon" viewBox="0 0 24 24">
<path d="M12 4.5C6 4.5 1.73 8.11 0 12c1.73 3.89 6 7.5 12 7.5s10.27-3.61 12-7.5c-1.73-3.89-6-7.5-12-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
</svg>
</button>
</div>
<script>
function togglePassword() {
const passwordInput = document.getElementById("password");
const eyeIcon = document.getElementById("eyeIcon");
if (passwordInput.type === "password") {
passwordInput.type = "text";
eyeIcon.innerHTML = `<path d="M12 4.5C6 4.5 1.73 8.11 0 12c1.73 3.89 6 7.5 12 7.5s10.27-3.61 12-7.5c-1.73-3.89-6-7.5-12-7.5zM4.91 12c1.71-2.93 5.06-5 7.09-5s5.38 2.07 7.09 5c-1.71 2.93-5.06 5-7.09 5s-5.38-2.07-7.09-5zm7.09 3c-1.66 0-3-1.34-3-3h-2c0 2.76 2.24 5 5 5v-2zm0-6c1.66 0 3 1.34 3 3h2c0-2.76-2.24-5-5-5v2z"/>`;
} else {
passwordInput.type = "password";
eyeIcon.innerHTML = `<path d="M12 4.5C6 4.5 1.73 8.11 0 12c1.73 3.89 6 7.5 12 7.5s10.27-3.61 12-7.5c-1.73-3.89-6-7.5-12-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>`;
}
}
</script>
</body>
</html>
