webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Border Beam — Free HTML CSS JS Traveling Border Snippet

Border Beam · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsCSS AnimationE-Commerce

Copy & paste

Source Code

<div class="bm-stage">
  <article class="bm-card">
    <span class="bm-beam" aria-hidden="true"></span>
    <span class="bm-beam bm-beam2" aria-hidden="true"></span>
    <div class="bm-body">
      <div class="bm-icon">◆</div>
      <h3>Pro plan</h3>
      <p>A bead of light travels the card border on an SVG-free, GPU-friendly path.</p>
      <button type="button" class="bm-btn">Upgrade</button>
    </div>
  </article>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS Motion Path
offset-path traces the exact border.
Auto-oriented bead
offset-rotate banks it around corners.
Comet tail
An elongated gradient pill with a glow.
Dual chasing beams
A second beam on a delayed offset.
Clipped to the card
overflow hidden frames the light.
Content stays clear
Beams sit behind the body.
JS fallback
Manual perimeter walk where unsupported.
GPU-cheap
One property animates on a tiny element.

About this UI Snippet

Border Beam — A Light Bead Tracing the Card Border

Screenshot of the Border Beam snippet rendered live

The border beam is the popular accent where a small bright bead of light travels continuously around a card border, tracing the rounded rectangle like a comet on a track. This snippet builds it primarily with CSS Motion Path — the modern offset-path API — so the beam follows the exact border with almost no code, and it includes a JavaScript fallback for older browsers.

CSS Motion Path does the work

The beam is a small gradient pill, and its position is controlled by offset-path: rect(0 100% 100% 0 round 18px), which defines a rounded-rectangle track matching the card border. Animating offset-distance from 0% to 100% slides the beam along that path, and offset-rotate: auto keeps the pill oriented along the direction of travel, so it banks around the corners naturally. This is the entire animation — no SVG path, no per-frame JavaScript, and the browser composites it on the GPU.

A comet, not a dot

The bead is a 90px-wide pill with a linear-gradient that fades from transparent to bright and back, plus a colored drop-shadow. Because it is elongated and oriented along the path, it reads as a streak of light with a glowing head rather than a plain dot — the comet look. A second beam with a different color and a -2s animation delay travels the same path on the opposite side, so two beams chase each other around the border.

Confined to the card

The card uses overflow: hidden and isolation: isolate, so the beams and their glow are clipped to the rounded shape and the stacking context stays self-contained. The card body sits above the beams via z-index, so the light passes behind the content along the edge without obscuring the icon, text, or button.

The fallback

CSS Motion Path is widely supported, but the script checks CSS.supports('offset-path', ...) and, only if unsupported, animates each beam manually. The fallback computes the card perimeter and walks a position parameter around it each frame, mapping the distance to x/y coordinates along the four edges and translating the beam there. This guarantees the effect still runs everywhere, while modern browsers get the cheaper pure-CSS path. Most users never execute the fallback at all.

Why offset-path over alternatives

Older border-light effects rotate a huge conic gradient behind a masked panel (like a spinning ring) or animate an SVG stroke. offset-path is more precise — the beam genuinely follows the border including the corner radius — and lighter, since it animates a single property on a tiny element. It also makes the speed and direction trivial to control through the animation, and supports multiple independent beams on one path.

Customizing it

Change the round radius in offset-path to match your card, recolor the beam gradients, lengthen the pill for a longer tail, retime the loop for a faster or slower orbit, or add more beams with staggered delays. Use it on buttons or inputs by giving them the same beam and a matching path. Pair it with a shimmer button or a meteor card for a coordinated set of glowing components.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA card renders with a bead of light circling its border.
  2. 2
    Watch the beamIt traces the rounded rectangle and banks around corners.
  3. 3
    Spot the second beamA different-colored beam chases it from the opposite side.
  4. 4
    Match your radiusSet the offset-path round value to your card radius.
  5. 5
    Recolor the beamsEdit the gradient colors and glow.
  6. 6
    Add more beamsDuplicate with staggered animation delays.

Real-world uses

Common Use Cases

Featured plan highlights
Highlight a tier beside a pricing card, with a bright bead tracing the border like a comet on a track.
Premium upsell cards
Pair with a meteor card set, using offset-path so the beam follows the exact rounded border.
AI product cards
Match a shimmer button call to action, with a second beam on a delayed offset for a dual chasing effect.
Dashboard attention markers
Draw attention to a key tile inside a metric card grid, with offset-rotate banking the bead around corners.
Motion Path reference
Learn border animation with CSS Motion Path, including the JavaScript fallback for browsers that do not support it.
Related: Direction-Aware Hover
See the Direction-Aware Hover for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The beam uses CSS Motion Path: offset-path defines a rounded-rectangle track matching the card border, and animating offset-distance from 0% to 100% slides the beam along it. offset-rotate: auto keeps the pill oriented along the direction of travel so it banks around the corners. That single animation is the whole effect — no SVG and no per-frame JavaScript.

The bead is a 90px-wide pill filled with a gradient that fades from transparent to bright and back, plus a colored drop-shadow. Because it is elongated and oriented along the path, it reads as a streak of light with a glowing head rather than a round dot, giving the comet appearance.

The script checks CSS.supports for offset-path and, only when it is unsupported, animates each beam manually. The fallback computes the card perimeter and walks a position around the four edges each frame, translating the beam to the matching x/y. Modern browsers skip this entirely and use the cheaper pure-CSS path.

A conic-gradient ring spins a large element behind a mask, which approximates a border. offset-path is more precise — the beam genuinely follows the border including the corner radius — and lighter, animating one property on a tiny element. It also supports multiple independent beams on the same path with staggered delays.

The CSS, including offset-path, ports directly — wrap it in a component and set the path radius to match your card. Run the support check and fallback in a mount effect with cleanup that cancels the animation frame on unmount, using refs for the beams. In Tailwind, apply the offset-path and animation via arbitrary values and keep the fallback in the component logic.

Design your website