Gradient Divider

gradient x fade

Horizontal divider with gradient fade to transparent. From Bundui.

dividergradientfadebundui

Code

divider-gradient.tsx

export function GradientDivider({ label }: { label?: string }) {
  if (!label) return <div className="h-px w-full bg-gradient-to-r from-transparent via-border to-transparent" />;
  return (
    <div className="flex items-center gap-4">
      <div className="h-px flex-1 bg-gradient-to-r from-transparent to-border" />
      <span className="text-xs uppercase tracking-wider text-muted-foreground">{label}</span>
      <div className="h-px flex-1 bg-gradient-to-l from-transparent to-border" />
    </div>
  );
}

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