Glowing Card

glow x border

Card with animated glowing border gradient. From Animata.

cardglowborderanimata

Glowing Card

Animated gradient border glow

Code

card-glowing.tsx

export function GlowingCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative rounded-xl bg-card">
      <div className="absolute -inset-0.5 animate-[spin_3s_linear_infinite] rounded-xl bg-gradient-to-r from-violet-500 via-fuchsia-500 to-orange-500 opacity-75 blur-sm" />
      <div className="relative rounded-xl bg-card p-6">{children}</div>
    </div>
  );
}
/* CSS: @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } */

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Glowing Card component and wire it to my accent.”