Back to Snippets

Biometric Face ID Scanner UI CSS

A dark panel holding a wireframe face, four corner brackets and a green line that sweeps up and down across it, under an authenticating label that pulses.

The sweep is one keyframe animating translateY from above the box to below it, set to alternate so it reverses rather than jumping back to the start. The panel has overflow hidden, and that is what crops the line at the edges and sells the idea of it passing through a fixed window.

The glow is a box-shadow with a wide blur and spread on the line, plus a drop-shadow filter on the SVG face. The brackets are four squares with transparent borders and only two sides colored on each. This is presentation only, so treat it as the visual layer over whatever authentication you actually run.

150

#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