Scanner Frame Border: CSS Border Animation

Scanner Frame Border

Rounded viewfinder corners breathe around a code while a glowing scan line sweeps up and down, the camera screen of every QR payment app. The corners are one border masked down to its four corners.

Also known as: qr code scanner animation css, scan line animation, viewfinder corners css.

Color Base size 16px Dark background Hold hover state

HTML

<div class="bdr-scanner-frame-border">
  <span class="bdr-scanner-frame-border-corners"></span>
  <svg class="bdr-scanner-frame-border-code" viewBox="0 0 21 21" aria-hidden="true"><path d="M0 0h7v7h-7zM1 1v5h5v-5zM2 2h3v3h-3zM14 0h7v7h-7zM15 1v5h5v-5zM16 2h3v3h-3zM0 14h7v7h-7zM1 15v5h5v-5zM2 16h3v3h-3zM8 0h2v2h-2zM11 0h1v1h-1zM11 1h2v1h-2zM8 2h3v1h-3zM12 2h1v2h-1zM8 3h1v1h-1zM9 4h1v1h-1zM11 4h2v1h-2zM8 5h2v1h-2zM9 6h1v1h-1zM11 6h2v1h-2zM8 7h1v1h-1zM10 7h2v1h-2zM1 8h1v1h-1zM4 8h1v1h-1zM9 8h1v2h-1zM11 8h2v1h-2zM14 8h1v1h-1zM16 8h1v1h-1zM0 9h1v2h-1zM14 9h2v1h-2zM17 9h1v1h-1zM19 9h2v1h-2zM2 10h3v1h-3zM6 10h2v1h-2zM12 10h3v1h-3zM17 10h4v1h-4zM2 11h4v1h-4zM12 11h1v1h-1zM17 11h3v1h-3zM0 12h3v1h-3zM5 12h6v1h-6zM13 12h5v1h-5zM9 13h4v1h-4zM14 13h2v1h-2zM18 13h1v1h-1zM20 13h1v1h-1zM12 14h3v1h-3zM18 14h2v1h-2zM13 15h1v1h-1zM15 15h5v1h-5zM9 16h1v1h-1zM13 16h5v1h-5zM11 17h1v1h-1zM17 17h1v1h-1zM19 17h1v1h-1zM9 18h2v1h-2zM13 18h3v1h-3zM18 18h1v1h-1zM9 19h1v1h-1zM11 19h2v1h-2zM17 19h1v1h-1zM20 19h1v1h-1zM8 20h3v1h-3zM12 20h3v1h-3zM16 20h1v1h-1zM20 20h1v1h-1z"/></svg>
  <span class="bdr-scanner-frame-border-beam"></span>
</div>

CSS

.bdr-scanner-frame-border {
  --c: var(--bdr-color, #3b82f6);
  font-size: var(--bdr-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 8.5em;
  border-radius: 1em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-scanner-frame-border-corners {
  position: absolute;
  inset: 0;
  border: 0.2em solid var(--c);
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(90deg, #000 18%, transparent 0 82%, #000 0),
    linear-gradient(#000 28%, transparent 0 72%, #000 0);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, #000 18%, transparent 0 82%, #000 0),
    linear-gradient(#000 28%, transparent 0 72%, #000 0);
  mask-composite: intersect;
  animation: bdr-scanner-frame-border-breathe 2.4s var(--ease) infinite;
}
.bdr-scanner-frame-border-code {
  width: 3.4em;
  height: 3.4em;
  fill: currentColor;
  opacity: 0.8;
}
.bdr-scanner-frame-border-beam {
  position: absolute;
  top: 0;
  left: 1.4em;
  right: 1.4em;
  height: 0.14em;
  border-radius: 1em;
  background: linear-gradient(90deg, transparent, var(--c) 20% 80%, transparent);
  box-shadow: 0 0 0.6em 0.1em color-mix(in srgb, var(--c) 55%, transparent);
  animation: bdr-scanner-frame-border-scan 2.4s var(--ease) infinite alternate;
}
@keyframes bdr-scanner-frame-border-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.965, 0.94); }
}
@keyframes bdr-scanner-frame-border-scan {
  from { transform: translateY(1.2em); }
  to   { transform: translateY(7.2em); }
}

@media (prefers-reduced-motion: reduce) {
  .bdr-scanner-frame-border, .bdr-scanner-frame-border *, .bdr-scanner-frame-border::before, .bdr-scanner-frame-border::after, .bdr-scanner-frame-border *::before, .bdr-scanner-frame-border *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --bdr-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --bdr-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Scanner Frame Border

HTML

CSS

Customizing this snippet

Similar border animations