24 CSS Login Form Designs with Live Demos
Biometric Prompt
Biometric / passkey login form. A fingerprint button takes centre stage with an animated scan line; email + password stay available below as a quiet fallback inside `<details>`.
Biometric Prompt the 24th of 24 designs in the 24 CSS Login Form Designs with Live Demos collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<form class="lf-bio" aria-label="Biometric or password sign in">
<button type="button" class="lf-bio-print" aria-label="Sign in with passkey">
<svg viewBox="0 0 64 64" width="40" height="40" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
<path d="M16 38c0-10 7-18 16-18s16 8 16 18" />
<path d="M22 42c0-7 4.5-12 10-12s10 5 10 12" />
<path d="M28 46c0-4 1.5-7 4-7s4 3 4 7" />
<path d="M14 28c4-6 10-10 18-10s14 4 18 10" />
</g>
</svg>
<span class="lf-bio-scan" aria-hidden="true"></span>
</button>
<h2 class="lf-bio-title">Use your passkey</h2>
<p class="lf-bio-sub">Touch the sensor or use Face ID</p>
<hr class="lf-bio-divider" />
<details class="lf-bio-fallback">
<summary>or sign in with password</summary>
<label class="lf-bio-row">
<input type="email" name="email" autocomplete="email" placeholder="Email" required />
</label>
<label class="lf-bio-row">
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="Password"
required
/>
</label>
<button type="submit" class="lf-bio-submit">Sign in</button>
</details>
</form> .lf-bio {
width: 100%;
max-width: 280px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
padding: 28px 22px 22px;
display: grid;
gap: 8px;
justify-items: center;
text-align: center;
}
.lf-bio-print {
position: relative;
width: 86px;
height: 86px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #2a2a36 0%, #0a0a14 70%);
border: 1px solid rgba(124, 108, 255, 0.4);
color: #c8c0ff;
display: grid;
place-items: center;
cursor: pointer;
overflow: hidden;
box-shadow:
0 0 0 4px rgba(124, 108, 255, 0.05),
0 8px 24px -8px rgba(124, 108, 255, 0.45);
transition:
transform 0.15s,
box-shadow 0.25s;
}
.lf-bio-print:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 6px rgba(124, 108, 255, 0.1),
0 12px 32px -8px rgba(124, 108, 255, 0.6);
}
.lf-bio-scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 12px;
background: linear-gradient(180deg, transparent, rgba(124, 108, 255, 0.65), transparent);
animation: lfBioScan 2.4s ease-in-out infinite;
}
@keyframes lfBioScan {
0%,
100% {
transform: translateY(0);
opacity: 0.9;
}
50% {
transform: translateY(74px);
opacity: 1;
}
}
.lf-bio-title {
margin: 8px 0 0;
font-size: 14px;
font-weight: 700;
color: #f0eeff;
}
.lf-bio-sub {
margin: 0;
font-size: 12px;
color: #b8b6d4;
}
.lf-bio-divider {
width: 100%;
margin: 8px 0 4px;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lf-bio-fallback {
width: 100%;
text-align: left;
}
.lf-bio-fallback summary {
font-size: 11px;
color: #a78bfa;
cursor: pointer;
list-style: none;
padding: 4px 0;
text-align: center;
user-select: none;
}
.lf-bio-fallback summary::-webkit-details-marker {
display: none;
}
.lf-bio-fallback summary:hover {
color: #c8c0ff;
}
.lf-bio-fallback[open] {
display: grid;
gap: 8px;
}
.lf-bio-fallback[open] summary {
margin-bottom: 4px;
}
.lf-bio-row input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 9px 12px;
font-size: 13px;
color: #f0eeff;
outline: none;
transition: border-color 0.15s;
}
.lf-bio-row input:focus {
border-color: #7c6cff;
}
.lf-bio-submit {
width: 100%;
padding: 9px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.lf-bio,
.lf-bio * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Aurora GlowNeon SynthwaveLiquid SlideCard Flip ResetMagic LinkTerminal PromptFloating PillGradient BorderSide PanelSocial FirstAnimated MascotCompact Modal
View the full collection →