Border beam
Also called animated gradient border, moving border, or border trail
A short streak of light that travels around the edge of a card or button on a loop, drawing attention to it.
import type { ReactNode } from 'react';
import { motion, useReducedMotion } from 'motion/react';
const LAP_SECONDS = 4;
export function BorderBeamCard({ children }: { children: ReactNode }) {
const reduceMotion = useReducedMotion();
return (
// The 1.5px padding is the border: a faint base plus the beam behind it.
<div className='relative isolate overflow-hidden rounded-2xl bg-border p-[1.5px]'>
{!reduceMotion && (
// A square conic gradient, transparent except one narrow wedge of
// blue, rotating behind the card. Only transform changes per frame.
<motion.div
aria-hidden
animate={{ rotate: 360 }}
transition={{
duration: LAP_SECONDS,
ease: 'linear',
repeat: Infinity
}}
className='absolute top-1/2 left-1/2 aspect-square w-[200%] -translate-1/2 bg-[conic-gradient(transparent_0deg,transparent_300deg,var(--color-blue-500)_350deg,transparent_360deg)]'
/>
)}
<div className='relative rounded-[calc(var(--radius-2xl)-1.5px)] bg-background p-6'>
{children}
</div>
</div>
);
}Add a border beam to the Pro pricing card: keep its faint 1px border and add a 1.5px streak of blue light that travels around the rounded edge every 4s with linear timing. Build it with a rotating conic-gradient layer behind the card, clipped by the card's rounded corners, animate only transform, and show a still border when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Border beam?
A border beam is a bright segment of color that circles the outline of an element, like light running along a wire. It shows up on pricing cards, AI prompt boxes, and new-feature callouts.
The common build places a rotating conic-gradient behind the element: a gradient that is transparent except for a narrow wedge of color. The element's padding, usually 1 to 2px, leaves a thin gap where that wedge shows through, so only the border lights up. Another approach moves a small glowing shape along the edge with CSS offset-path.
Use it on one element per screen, run it slowly (3 to 8 seconds per lap), and keep a faint full border so the shape still reads when the beam is on the far side. Rotating the gradient layer with transform is cheap; animating the gradient's angle through a custom property repaints every frame. Under prefers-reduced-motion, show a still border.
Often confused with
- Glow effect
- A glow is a soft halo of light around an element and is often still. A border beam is a streak that keeps moving along the edge.
Related terms
All termsGlow effect
A soft halo of colored light around a button, card, or text, made with colored shadows or a blurred layer behind the element.
Animated gradient
A color gradient that slowly shifts across a surface on a loop, often used behind a hero or call to action to add warmth and motion.
Looping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Mask
A CSS technique that uses an image or gradient to set how visible each part of an element is, often used to fade edges softly.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.