Gradient Pill Stepper with Tooltip
Source: Dev.to
Multi‑step progress bars are everywhere in onboarding flows, checkout processes, and project wizards. 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
(Live demo available via the link below.)
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! 👇