Design Atlas
한국어
✦ Visual effects

Border beam

보더 빔

A short streak of light that continuously travels around a card's border, instead of the whole edge glowing at once.

Also known as: Animated border lightBorder glow trail
···
html
<div class="beam-border" id="bb"><div class="inner"><strong>Pro plan</strong><span>border beam</span></div></div>
css
.beam-border{--a:0deg;position:relative;width:min(240px,80%);border-radius:16px;padding:2px;
  background:conic-gradient(from var(--a),transparent 0 78%,var(--accent-2) 88%,var(--accent) 94%,transparent 100%)}
.inner{border-radius:14px;background:var(--surface);padding:28px 22px;display:grid;gap:5px;
  border:1px solid var(--line);text-align:center}
.inner strong{color:var(--fg);font-size:17px}
.inner span{color:var(--muted);font-size:12px;letter-spacing:.02em}
js
const el = document.getElementById('bb');
let a = 0;
(function loop(){ a = (a + 1.6) % 360; el.style.setProperty('--a', a + 'deg'); requestAnimationFrame(loop); })();

A gradient border colours the entire edge at once; a border beam lights only a short arc with a fading tail, leaving the rest of the edge as an ordinary border. As that arc travels around the perimeter, it reads as a streak of light passing by.

It uses the same double-background trick as gradient border. The outer element gets a conic-gradient that's transparent almost everywhere except one narrow band (say 85–100%) filled with the accent colour, forming a short arc. An inner layer, inset by the border's thickness, covers the centre with the surface colour so the gradient only shows through the edge — then JS nudges the conic-gradient's from angle forward every frame.

Narrow the transparent band and the beam reads sharper; widen it and it approaches a plain gradient border. Keep the rotation to roughly 3–5 seconds per lap — faster gets distracting.

When to use

Use for an "AI" badge, the active pricing tier, or a card representing work in progress. Applying it to several cards at once erases the emphasis — reserve it for the one thing you want noticed.