<div class="scanner-container">
<div class="scanner-box">
<div class="scan-line"></div>
<svg class="face-wireframe" viewBox="0 0 24 24" width="120" height="120" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 3v2"></path>
<path d="M15 3v2"></path>
<path d="M3 9h2"></path>
<path d="M19 9h2"></path>
<path d="M5 19h14"></path>
<path d="M9 15h6"></path>
<circle cx="12" cy="12" r="9"></circle>
<circle cx="9" cy="10" r="1"></circle>
<circle cx="15" cy="10" r="1"></circle>
</svg>
<div class="corners">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
</div>
<h3 class="auth-text">Authenticating...</h3>
</div>
Back to Snippets
Biometric Face ID Scanner UI CSS
Add a futuristic security feel with this biometric Face ID scanner. We animated a glowing scan line that sweeps across the face geometry, so it mimics modern mobile authentication perfectly.
99