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.