Flowing Electric Border: CSS Border Animation

Flowing Electric Border

Two thin arcs of current writhe around a dark panel and never settle into a repeating frame. SMIL eases the noise frequency of an SVG turbulence filter that displaces each outline.

Also known as: electric border css, electric border animation, animated lightning border, energy border css.

Turbo mode

Color Base size 16px Dark background Hold hover state

HTML

<div class="bdr-electric-current-border">
  <svg class="bdr-electric-current-border-svg" viewBox="0 0 150 85" preserveAspectRatio="none" aria-hidden="true">
    <defs>
      <filter id="bdr-electric-current-border-a" x="-10%" y="-20%" width="120%" height="140%">
        <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="3" seed="3">
          <animate attributeName="baseFrequency" values="0.026;0.044;0.026" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.45 0 0.55 1;0.45 0 0.55 1" dur="2.6s" repeatCount="indefinite"/>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="7"/>
      </filter>
      <filter id="bdr-electric-current-border-b" x="-10%" y="-20%" width="120%" height="140%">
        <feTurbulence type="turbulence" baseFrequency="0.04" numOctaves="2" seed="11">
          <animate attributeName="baseFrequency" values="0.048;0.03;0.048" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.45 0 0.55 1;0.45 0 0.55 1" dur="1.9s" repeatCount="indefinite"/>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="9"/>
      </filter>
    </defs>
    <rect class="bdr-electric-current-border-halo" x="4" y="4" width="142" height="77" rx="9"/>
    <rect class="bdr-electric-current-border-arc" x="4" y="4" width="142" height="77" rx="9" filter="url(#bdr-electric-current-border-a)"/>
    <rect class="bdr-electric-current-border-arc bdr-electric-current-border-arc-thin" x="4" y="4" width="142" height="77" rx="9" filter="url(#bdr-electric-current-border-b)"/>
  </svg>
  <span class="bdr-electric-current-border-text">Turbo mode</span>
</div>

CSS

.bdr-electric-current-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;
  isolation: isolate;
  background:
    radial-gradient(80% 90% at 50% 50%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--c) 6%, #06070b);
  color: color-mix(in srgb, var(--c) 25%, #fff);
}
.bdr-electric-current-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.15em var(--c)) drop-shadow(0 0 0.6em color-mix(in srgb, var(--c) 60%, transparent));
  pointer-events: none;
}
.bdr-electric-current-border-svg rect { fill: none; }
.bdr-electric-current-border-halo {
  stroke: color-mix(in srgb, var(--c) 28%, transparent);
  stroke-width: 3;
}
.bdr-electric-current-border-arc {
  stroke: color-mix(in srgb, var(--c) 40%, #fff);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.bdr-electric-current-border-arc-thin {
  stroke: var(--c);
  stroke-width: 0.8;
  opacity: 0.85;
}
.bdr-electric-current-border-text {
  font-size: 1.05em;
  letter-spacing: 0.06em;
  text-shadow: 0 0 0.5em var(--c);
  animation: bdr-electric-current-border-hum 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes bdr-electric-current-border-hum {
  50% { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .bdr-electric-current-border-arc { filter: none; }
  .bdr-electric-current-border-arc-thin { display: none; }
  .bdr-electric-current-border-text { animation: none; }
}

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

Flowing Electric Border

HTML

CSS

Customizing this snippet

Similar border animations