Animated Gradient Border
by Dax · tsx · 26 lines
A card with a continuously rotating gradient border. Uses a conic gradient on a pseudo-element behind the card, spinning via CSS animation — no JavaScript needed for the effect itself.
bordergradientcardcss-animation
26 lines
export function GradientCard({ children, className = "" }: {
children: React.ReactNode;
className?: string;
}) {
return (
<div className={`relative rounded-xl p-px ${className}`}>
<div className="absolute inset-0 rounded-xl overflow-hidden">
<div
className="h-full w-full animate-spin-slow"
style={{
background: "conic-gradient(from 0deg, #22c55e, #3b82f6, #a855f7, #ef4444, #eab308, #22c55e)",
animationDuration: "4s",
}}
/>
</div>
<div className="relative rounded-[11px] bg-neutral-950 p-6">
{children}
</div>
</div>
);
}
// Add to your tailwind config or global CSS:
// @keyframes spin-slow { to { transform: rotate(360deg); } }
// .animate-spin-slow { animation: spin-slow 4s linear infinite; }