Gradient Tabs
Tabs with a soft color gradient on the active trigger for a vivid accent. Use them on landing pages or feature views where the switcher should draw the eye.
Tabs with a soft color gradient on the active trigger for a vivid accent. Use them on landing pages or feature views where the switcher should draw the eye.
Search blocks by description or jump to a page.
Gradient Tabs is a three-tab switcher in a single row. The tab list sits on a soft pastel band that runs blue through purple to pink, and each trigger picks up its own color pair when active: blue-to-purple for Account, purple-to-pink for Password, and pink-to-red for Settings. The active trigger fills with that color pair in white text so the selection is unmistakable. Below the list, the matching content panel has a light tinted background that echoes the active trigger's palette, with a heading and a short descriptive sentence inside a bordered card.
The tab labels, panel copy, and the number of tabs are all independent. You can swap in any section names that fit your product, replace the placeholder paragraphs with forms or detail content, and add or remove tabs without affecting the layout structure.
Reach for this pattern when a user profile or settings area needs a visible, engaging switcher that signals interactivity without relying on plain underlines. In a healthcare scheduling product it works well on a patient portal screen where sections like Appointments, Prescriptions, and Billing each need a clear visual boundary. It is a stronger choice than Minimal Tabs when the page has few other visual elements and the switcher needs to anchor the layout, and a lighter choice than Card Tabs when you want color rather than raised depth.
A natural flow around it on a Components page:
Before
After
Each tab panel is an open container, so the content is entirely up to you. A few practical fits:
Tip: keep each panel's content to roughly the same height so the page does not jump as users switch tabs.