Motion & Effects CSS Keyframes Conic Gradient Hardware Accelerated Tailwind v4

Border Beam

Dynamic glowing animated border beam gradient traveling continuously around cards and containers using pure CSS animations.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Border Beam component to your project via CLI:

terminal bash

npx plain-ui add border-beam

Features

✓ Smooth, hardware-accelerated CSS conic gradient animation
✓ Customizable beam size, color spectrum, duration, and glow intensity
✓ Works seamlessly with rounded cards, badges, and modals
✓ Zero JavaScript runtime or canvas requirements

Variants & Examples

Compact Status Badge Beam

Minimal glowing beam around pill status badges.

border-beam-compact-status-badge-beam.html html

<div class="flex items-center justify-center p-6">
  <div class="relative inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-zinc-950 text-white text-xs font-medium border border-zinc-800 overflow-hidden shadow-lg">
    <div class="absolute inset-[-150%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_0deg,transparent_0deg,transparent_300deg,#10b981_360deg)]"></div>
    <div class="relative z-10 flex items-center gap-2">
      <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
      <span>All Edge Networks Operational</span>
    </div>
  </div>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
duration	CSS duration	4s	Orbit speed of the border beam.
gradient	conic-gradient	-	Color stops for the glowing beam arc.

Accessibility & Keyboard Navigation

• Animation respects prefers-reduced-motion media queries.
• Pointer-events-none ensures beam overlay never blocks user clicks.

← Floating Label Input Shimmer Button →