Gradient Badge

gradient x glow

Gradient badge with subtle glow effect. From Magic UI.

badgegradientglowmagicui

PremiumActive

Code

badge-gradient.tsx

export function GradientBadge({ children, from = "from-violet-500", to = "to-fuchsia-500", glow = "shadow-violet-500/25" }: {
  children: React.ReactNode; from?: string; to?: string; glow?: string;
}) {
  return (
    <span className={\`rounded-full bg-gradient-to-r \${from} \${to} px-3 py-1 text-xs font-medium text-white shadow-lg \${glow}\`}>
      {children}
    </span>
  );
}

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 Gradient Badge component and wire it to my accent.”