Gradient Border

About

Gradient Border wraps any element with a continuously spinning gradient border. Unlike a moving dot (border-beam), this lights up the entire perimeter with a rotating conic gradient.

Key features:

• Pure CSS animation — no JavaScript frame loop
• Configurable colors, border width, radius, and rotation speed
• Optional outer glow matching gradient colors
• Polymorphic as prop — render as div, button, section, etc.

Installation

Usage

import { GradientBorder } from "@/components/motionx/gradient-border";

Basic card

<GradientBorder>
  <div className="p-6">Your content here</div>
</GradientBorder>

With glow effect

<GradientBorder
  colors={["#f97316", "#ef4444", "#ec4899", "#f97316"]}
  glow
  glowSize={12}
  speed={3}
  borderRadius={16}
>
  <div className="p-6">Glowing border</div>
</GradientBorder>

As a button

<GradientBorder as="button" borderRadius={999} borderWidth={2}>
  <span className="px-6 py-2 font-medium">Click me</span>
</GradientBorder>

Props

Tip: Use speed={2} for an energetic feel, or speed={8} for a calm, subtle effect. Pair glow with darker backgrounds for maximum impact.