Lightsaber Border: CSS Border Animation

Lightsaber Border

A glowing blade ignites out of a hilt at the bottom, races around both sides to meet at the top, hums, then retracts. Two SVG halves draw with stroke-dashoffset on the same clock.

Also known as: lightsaber css animation, glowing line border, ignite border animation.

Ignite

Color Base size 16px Dark background Hold hover state

HTML

<div class="bdr-lightsaber-border">
  <svg class="bdr-lightsaber-border-svg" viewBox="0 0 150 85" preserveAspectRatio="none" aria-hidden="true">
    <path class="bdr-lightsaber-border-glow" d="M75 85H10A10 10 0 0 1 0 75V10A10 10 0 0 1 10 0H75" pathLength="100"/>
    <path class="bdr-lightsaber-border-glow" d="M75 85H140A10 10 0 0 0 150 75V10A10 10 0 0 0 140 0H75" pathLength="100"/>
    <path class="bdr-lightsaber-border-core" d="M75 85H10A10 10 0 0 1 0 75V10A10 10 0 0 1 10 0H75" pathLength="100"/>
    <path class="bdr-lightsaber-border-core" d="M75 85H140A10 10 0 0 0 150 75V10A10 10 0 0 0 140 0H75" pathLength="100"/>
  </svg>
  <span class="bdr-lightsaber-border-hilt"></span>
  Ignite
</div>

CSS

.bdr-lightsaber-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;
  background: color-mix(in srgb, var(--c) 5%, #09090c);
  color: color-mix(in srgb, var(--c) 25%, #fff);
  letter-spacing: 0.06em;
}
.bdr-lightsaber-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.25em var(--c)) drop-shadow(0 0 0.6em color-mix(in srgb, var(--c) 60%, transparent));
  pointer-events: none;
  animation: bdr-lightsaber-border-hum 0.14s linear infinite;
}
.bdr-lightsaber-border-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: bdr-lightsaber-border-ignite 5s infinite;
}
.bdr-lightsaber-border-glow {
  stroke: var(--c);
  stroke-width: 4;
  stroke-opacity: 0.7;
}
.bdr-lightsaber-border-core {
  stroke: color-mix(in srgb, var(--c) 12%, #fff);
  stroke-width: 1.4;
}
.bdr-lightsaber-border-hilt {
  position: absolute;
  bottom: -0.4em;
  left: 50%;
  width: 2.8em;
  height: 0.8em;
  margin-left: -1.4em;
  border-radius: 0.2em;
  background:
    repeating-linear-gradient(90deg, #3f3f46 0 0.14em, transparent 0.14em 0.32em) 50% 50% / 55% 60% no-repeat,
    linear-gradient(#f4f4f5, #a1a1aa 45%, #52525b);
  box-shadow: 0 0.1em 0.25em color-mix(in srgb, #000 45%, transparent);
}
@keyframes bdr-lightsaber-border-ignite {
  0%       { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1); }
  14%, 72% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  82%, 100% { stroke-dashoffset: 100; }
}
@keyframes bdr-lightsaber-border-hum {
  50% { opacity: 0.86; }
}

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

Lightsaber Border

HTML

CSS

Customizing this snippet

Similar border animations