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.

135

#css

#biometric

#face id

#security

#scanner

#animation

#glowing

#futuristic

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #020617;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.scanner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.scanner-box {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.5);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.1);
}

.face-wireframe {
  color: #3b82f6;
  opacity: 0.5;
  filter: drop-shadow(0 0 8px #3b82f6);
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #10b981;
  box-shadow: 0 0 20px 5px rgba(16, 185, 129, 0.6);
  z-index: 10;
  animation: scan 2.5s ease-in-out infinite alternate;
}

@keyframes scan {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(210px); }
}

.corners .corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid transparent;
  border-radius: 4px;
}

.top-left {
  top: 10px;
  left: 10px;
  border-top-color: #3b82f6;
  border-left-color: #3b82f6;
}

.top-right {
  top: 10px;
  right: 10px;
  border-top-color: #3b82f6;
  border-right-color: #3b82f6;
}

.bottom-left {
  bottom: 10px;
  left: 10px;
  border-bottom-color: #3b82f6;
  border-left-color: #3b82f6;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
  border-bottom-color: #3b82f6;
  border-right-color: #3b82f6;
}

.auth-text {
  color: #94a3b8;
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: pulse-text 1.5s infinite alternate;
}

@keyframes pulse-text {
  0% { opacity: 0.5; }
  100% { opacity: 1; color: #3b82f6; text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
}

Biometric Face ID Scanner UI CSS

Share Code Snippet