Gradient Border Badge

A badge wrapped in a colorful gradient outline around plain fill. Use it to mark beta, pro, or featured labels that need a vivid accent edge.

import { Badge } from '@/components/ui/badge';

export default function GradientBorderBadge() {
  return (
    <div className="flex flex-wrap justify-center gap-4 p-6">
      <div className="relative inline-flex">
        <div className="from-primary to-secondary absolute -inset-0.5 rounded-full bg-gradient-to-r opacity-75 blur-[1px]"></div>
        <Badge variant="secondary" className="relative border-0">
          Premium
        </Badge>
      </div>

      <div className="relative inline-flex">
        <div className="absolute -inset-0.5 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 opacity-75 blur-[1px]"></div>
        <Badge variant="secondary" className="relative border-0">
          Pro
        </Badge>
      </div>

      <div className="relative inline-flex">
        <div className="absolute -inset-0.5 rounded-full bg-gradient-to-r from-amber-500 to-pink-500 opacity-75 blur-[1px]"></div>
        <Badge variant="secondary" className="relative border-0">
          VIP
        </Badge>
      </div>

      <div className="relative inline-flex">
        <div className="absolute -inset-0.5 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 opacity-75 blur-[1px]"></div>
        <Badge variant="secondary" className="relative border-0">
          Verified
        </Badge>
      </div>
    </div>
  );
}

About this block

Gradient Border Badge shows four pill badges side by side in a centered, wrapping row. Each badge sits inside a wrapper that projects a softly blurred gradient ring behind it, giving the pill a glowing colored outline rather than a flat border. The four demo labels are Premium, Pro, VIP, and Verified, and each carries its own color pair: a theme primary-to-secondary ramp, blue to purple, amber to pink, and green to emerald.

Every badge is independent. You can drop in as few as one or as many as you need, swap the label text, and change the gradient colors without touching the others. The glow intensity comes from the opacity and blur values on the background layer, so the effect scales gracefully at any badge size.

When to use

Reach for this badge when a label needs to read as visually distinct from surrounding UI without adding a heavy chip or colored fill. It works well on a developer tools product to mark tier or access level next to a feature name: a "Pro" or "Beta" tag on an API reference page signals what is available without interrupting the reading flow. It also fits upgrade prompts and account settings where a tier label should feel polished rather than blunt.

A natural flow around it on a Components page:

Before

Buttons to present the primary action that the badge is qualifying, such as an upgrade or activation control
Cards where the badge appears as a tier or status marker on a feature card

After

Alerts to follow up with a contextual message about the labeled tier or feature state
An Elevated Badge if you want a raised, shadow-based accent instead of the glowing outline look

What you can customize

Each badge in the set is self-contained, so changes to one do not ripple to the others:

Label text. Swap "Premium", "Pro", "VIP", or "Verified" for any short string that fits a pill, such as a plan name, access level, or release stage.
Gradient color pair. Each wrapper layer takes any two color stops, so you can align the glow to your brand palette or use distinct hues to signal different tiers at a glance.
Badge count. Add or remove wrappers freely. A single prominent badge works just as well as a row of four when you only need to call out one label.

Tip: keep labels to one or two words so the pill stays compact and the gradient ring wraps cleanly without stretching.

About this block

When to use

A natural flow around it on a Components page:

Before

Buttons to present the primary action that the badge is qualifying, such as an upgrade or activation control
Cards where the badge appears as a tier or status marker on a feature card

After

Alerts to follow up with a contextual message about the labeled tier or feature state
An Elevated Badge if you want a raised, shadow-based accent instead of the glowing outline look

What you can customize

Each badge in the set is self-contained, so changes to one do not ripple to the others:

Label text. Swap "Premium", "Pro", "VIP", or "Verified" for any short string that fits a pill, such as a plan name, access level, or release stage.
Gradient color pair. Each wrapper layer takes any two color stops, so you can align the glow to your brand palette or use distinct hues to signal different tiers at a glance.
Badge count. Add or remove wrappers freely. A single prominent badge works just as well as a row of four when you only need to call out one label.

Tip: keep labels to one or two words so the pill stays compact and the gradient ring wraps cleanly without stretching.

Gradient Border Badge

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize