24 CSS Login Form Designs with Live Demos 24 / 24
Biometric Prompt
Biometric / passkey login form.
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> <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;
}
}
.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 →