Glitch Border: CSS Border Animation

Glitch Border

A dark panel whose border tears into sliced, color-split copies for a split second, then snaps back. The copies are clip-path slices on a stepped keyframe, idle most of the loop so it stays readable.

Also known as: glitch border css, cyberpunk border animation, rgb split border.

Signal lost

Color Base size 16px Dark background Hold hover state

HTML

<div class="bdr-glitch-border">
  <span class="bdr-glitch-border-a"></span>
  <span class="bdr-glitch-border-b"></span>
  <span class="bdr-glitch-border-text">Signal lost</span>
</div>

CSS

.bdr-glitch-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;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--c) 6%, #08080c);
  color: color-mix(in srgb, var(--c) 25%, #fff);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.bdr-glitch-border::before,
.bdr-glitch-border-a,
.bdr-glitch-border-b {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.13em solid var(--c);
  border-radius: inherit;
  pointer-events: none;
}
.bdr-glitch-border::before {
  box-shadow: 0 0 0.6em color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 0.6em color-mix(in srgb, var(--c) 30%, transparent);
  animation: bdr-glitch-border-jolt 3s step-end infinite;
}
.bdr-glitch-border-a,
.bdr-glitch-border-b {
  opacity: 0;
  animation: bdr-glitch-border-tear 3s step-end infinite;
}
.bdr-glitch-border-a {
  border-width: 0.18em;
  border-color: color-mix(in srgb, var(--c) 35%, #00e5ff);
}
.bdr-glitch-border-b {
  border-width: 0.18em;
  border-color: color-mix(in srgb, var(--c) 35%, #ff2bd6);
  rotate: 180deg;
}
.bdr-glitch-border-text {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: bdr-glitch-border-jolt 3s step-end infinite;
}
@keyframes bdr-glitch-border-tear {
  0%, 16%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  2%  { opacity: 1; transform: translate(-0.3em, 0.1em); clip-path: inset(8% 0 62% 0); }
  5%  { opacity: 1; transform: translate(0.35em, -0.1em); clip-path: inset(55% 0 20% 0); }
  8%  { opacity: 1; transform: translate(-0.2em, 0); clip-path: inset(30% 0 45% 0); }
  11% { opacity: 1; transform: translate(0.25em, 0.1em); clip-path: inset(0 0 80% 0); }
  14% { opacity: 1; transform: translate(-0.15em, -0.05em); clip-path: inset(75% 0 0 0); }
}
@keyframes bdr-glitch-border-jolt {
  0%, 16%, 100% { transform: none; }
  3%  { transform: translateX(0.12em); }
  7%  { transform: translateX(-0.1em); }
  12% { transform: translateX(0.06em); }
}

@media (prefers-reduced-motion: reduce) {
  .bdr-glitch-border, .bdr-glitch-border *, .bdr-glitch-border::before, .bdr-glitch-border::after, .bdr-glitch-border *::before, .bdr-glitch-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.

Glitch Border

HTML

CSS

Customizing this snippet

Similar border animations