Gradient Pill Stepper with Tooltip

Multi-step progress bars are everywhere in onboarding flows, checkout processes, and project wizards. But most of them look the same — plain circles connected by a line.
I built one that actually looks as good as it works. 🎁

What I Built
Gradient Pill Stepper with Tooltip — a visually striking multi-step progress component featuring:
✅ Vibrant pink-purple gradient progress track
✅ Glassmorphism effects for completed steps
✅ Smooth width transitions as steps complete
✅ Animated floating tooltip showing active stage details
✅ "CURRENT GOAL" card with Edit functionality
✅ Checkmark icons for completed steps
✅ Numbered indicators for upcoming steps
✅ Built entirely with Tailwind CSS — zero UI libraries
✅ Perfect for onboarding flows, project wizards, and checkout processes

See It in Action

The Design Breakdown
Gradient Progress Track
The pink-to-purple gradient pill is the centerpiece — it fills smoothly as steps complete, giving users a satisfying sense of progress. Far more engaging than a plain grey bar.
Glassmorphism Step Indicators
Completed steps use a glassmorphism circle with a checkmark — semi-transparent, glowing, premium. Upcoming steps show simple numbered circles in grey, keeping the focus on what's done vs. what's ahead.
Animated Floating Tooltip
The active step triggers a floating tooltip card showing "CURRENT GOAL" with details and an Edit option. Users always know exactly where they are and what's needed — reducing drop-off in multi-step flows.
Smooth Width Transitions
As steps complete, the gradient track expands smoothly — Tailwind transitions handle this with zero JavaScript. The animation alone makes users feel accomplished.

Where to Use This

SaaS onboarding — Create account → Add details → Verify → Launch
E-commerce checkout — Cart → Shipping → Payment → Confirm
Project creation wizards — Create → Media → Goals → Team → Launch
Profile completion — Basic info → Photo → Preferences → Done

Get the Free Code
👉 Get the free code → Gradient Pill Stepper with Tooltip
No sign-up required. Copy, paste, ship. 🚀

What is CodeBar Library?
CodeBar Library is a growing collection of free and premium UI components built for developers who care about design quality.
Available tech stacks:

HTML/CSS
Tailwind CSS
React
Framer Motion
GSAP animations
Bootstrap

Everything is production-ready and copy-paste friendly. Whether you're building a portfolio, a SaaS product, or a client project — there's something for you.

What's Coming Next?

🔨 Full Stack Project Starter Kits
🎨 Premium UI Templates (Landing Pages, Dashboards)
⚡ More free Tailwind components every week

Drop a ❤️ if you found this useful and follow for more free components every week!
Using this stepper in your project? Drop a link in the comments! 👇
→ Browse all free components at CodeBar Library