← All effects
Border Beam
Priority access
A focused highlight travels around the edge without lighting the whole card.
-- fps
prefers-reduced-motion detected — beam parked at the top
X-ray · layers
the bright border segment
soft light outside
travels around the edge
Parameters
Speed6.0 turns/min
Border width2 px
Intensity0.9
Beam length38°
your version · updates as you tinker
How this effect works
The wrapper is only a few pixels larger than the card. Its background is a conic gradient with one short bright arc; the card covers the middle, leaving only the rim visible. Rotating the gradient makes the arc appear to travel around the border.
The halo is the same beam reused as a drop shadow. Because shape, color and motion share one angle, the outer light never detaches from the border highlight.
Production notes: respects prefers-reduced-motion (parked beam) · one gradient update per frame · no layout work during animation · copied snippet is self-contained HTML + CSS + JS.