24 CSS Login Form Designs with Live Demos

Show Password Toggle

Login form with a show / hide password toggle. Inline eye-icon button with proper `aria-pressed` and `aria-label` handling for accessibility.

Light JS MIT licensed

Show Password Toggle the 18th of 24 designs in the 24 CSS Login Form Designs with Live Demos collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<form class="lf-show" aria-label="Sign in with password reveal">
  <h2 class="lf-show-title">Sign in</h2>
  <label class="lf-show-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
  </label>
  <label class="lf-show-row lf-show-row-pw">
    <span>Password</span>
    <span class="lf-show-pw">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
      <button
        type="button"
        class="lf-show-eye"
        aria-label="Show password"
        aria-pressed="false"
        data-lf-eye
      >
        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
          <path
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
          />
        </svg>
      </button>
    </span>
  </label>
  <div class="lf-show-meta">
    <label><input type="checkbox" name="remember" /> Remember me</label>
    <a href="#">Forgot password?</a>
  </div>
  <button type="submit" class="lf-show-submit">Sign in</button>
</form>

.lf-show {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 26px 24px;
  display: grid;
  gap: 12px;
}
.lf-show-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-show-row {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-show-row input:focus {
  border-color: #7c6cff;
}
.lf-show-pw {
  position: relative;
  display: block;
}
.lf-show-pw input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 38px;
}
.lf-show-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #b8b6d4;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.lf-show-eye:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.04);
}
.lf-show-eye[aria-pressed="true"] {
  color: #7c6cff;
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.08);
}
.lf-show-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-meta input {
  accent-color: #7c6cff;
  margin-right: 4px;
}
.lf-show-meta a {
  color: #a78bfa;
  text-decoration: none;
}
.lf-show-submit {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-show-submit:hover {
  transform: translateY(-1px);
}

/* ─── tiny JS to toggle reveal ─── */
/*
document.querySelectorAll('[data-lf-eye]').forEach(btn => {
  btn.addEventListener('click', () => {
    const input = btn.previousElementSibling;
    const next  = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    btn.setAttribute('aria-pressed', String(next === 'text'));
    btn.setAttribute('aria-label', next === 'text' ? 'Hide password' : 'Show password');
  });
});
*/

// Show / hide password toggle
document.querySelectorAll('[data-lf-eye]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var input = btn.previousElementSibling;
    if (!input) return;
    var next = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    var revealed = next === 'text';
    btn.setAttribute('aria-pressed', String(revealed));
    btn.setAttribute('aria-label', revealed ? 'Hide password' : 'Show password');
  });
});

More from 24 CSS Login Form Designs with Live Demos

Card Flip Reset Magic Link Terminal Prompt Floating Pill Gradient Border Side Panel Social First Animated Mascot Compact Modal Glass Frosted Step-by-Step Animated Gradient Border

View the full collection →