Developer Tools New Tool

Free Online CSS Tabs Generator with Working Panels

Build a tab strip and its panels and switch between them in the preview. Set the tab padding, gap and font, pick an underline, pill or boxed indicator, choose the active and hover colours and style the panel area. The strip scrolls when the tabs overflow on a narrow screen.

Free Forever Nothing Uploaded Real working panels Runs in your browser

Free Online CSS Tabs Generator with Working Panels

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Tabs Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

These tabs are radio inputs and labels, so they switch with no JavaScript at all. The second set is squeezed into a narrow box to show the strip scrolling sideways when the tabs do not fit.

CSS

Tabs Labels Class name Input id stem

Strip Tab padding by px Gap px Font size px Active weight Indicator

Colours Tab text Active Hover Strip line Indicator size px

Panel Background Text Padding px Radius px Panel border

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build CSS Tabs

A few steps, and nothing is uploaded.

Name the tabs Type the labels separated by commas. The number of tabs follows from what you type, between two and eight, and both the preview and the generated CSS change with it, because the radio technique needs one pair of rules per tab.

Style the strip Tab padding, the gap between tabs, the font size, the weight the active tab takes, and the indicator: an underline, a pill or a boxed tab joined to the panel. The strip scrolls sideways on its own when the tabs are wider than the space available.

Style the panel Background, text colour, padding, radius and whether the panel carries a border. Only one panel is shown at a time, and the panels are in the same container so the box does not jump when you switch between panels of different heights.

Copy whichever version fits The output has the CSS, then the CSS only radio markup, then the ARIA markup with role tablist, role tab, aria-selected and aria-controls, plus the keyboard handler it needs. The same CSS drives both, so the choice is about the markup and the script, not the styling.

What to Know About Tabs

Including why the radio trick is not accessible as tabs.

The radio trick works, and it is not accessible as tabs. Radio inputs and labels genuinely switch panels with no JavaScript, which is why it is worth having, but a screen reader announces a radio group, not a set of tabs, and it reports the panels as ordinary content rather than as regions tied to a tab. If the tabs are decorative navigation on a marketing page, that is a reasonable trade. If they are part of an application, use the ARIA version in the output instead: role="tablist", role="tab", aria-selected and aria-controls, with the arrow key handler that the pattern requires.

A tab strip needs to scroll, not wrap. Four tabs that fit on a laptop will not fit on a phone, and a wrapped second row looks like a mistake and pushes the panel down the page. The generated strip uses overflow-x: auto with flex-shrink: 0 on the tabs, so the row stays one line and scrolls. Consider adding scroll-snap-type if you want the tabs to settle neatly, and keep the strip reachable, since a scroll container with no visible scrollbar can be hard to discover.

Do not hide content people need to find behind a tab. Anything in a hidden panel is invisible to a page search, is skipped by a reader scanning the page and will not print. Tabs are for parallel alternatives, one of which the reader will choose, such as a size chart or two billing periods. Sequential content, or anything a reader needs to compare side by side, belongs on the page.

This page styles the strip and panels only. There is no vertical tab layout, no closeable tabs, no scroll buttons at the ends of the strip, no deep linking by URL hash and no animated indicator that slides between tabs. It does not remember which tab was open either. The keyboard handler for the ARIA version is provided as a comment for you to paste, not as something the page wires up.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Genuinely working Radio inputs, so the preview switches with no script at all.

Three indicators Underline, pill or a boxed tab joined to the panel.

A strip that scrolls Tabs stay on one line and scroll sideways when they overflow.

The ARIA version too Roles, aria-selected and the arrow key handler as a comment.

Both markups The radio structure and the accessible one, from the same CSS.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Tabs Generator

Tabs are one of the few controls where the CSS only version really does work. A group of radio inputs holds the state, labels act as the tabs because a label activates its input, and a sibling selector shows the matching panel. There is no script anywhere, it survives a failed bundle, and it is short enough to read. The preview on this page is exactly that, which is why clicking a tab switches it with nothing running.

What the technique cannot do is announce itself correctly. To an assistive technology user the strip is a radio group and the panels are plain content, so the relationship the visual design is expressing does not exist in the accessibility tree. That is a real limitation and not one worth papering over, so the tool writes the ARIA version as well: the same CSS, different markup, plus the arrow key handling the tab pattern requires. Choose according to what the tabs are for.

The layout detail worth noticing is the strip. Tabs must stay on one line, because a wrapped strip reads as a broken layout, so the strip is a flex row with overflow-x: auto and tabs that refuse to shrink. The preview includes a deliberately narrow copy of the same tabs so you can see that behaviour rather than take it on trust, which is the part most tab CSS gets wrong the first time it meets a phone.

Frequently Asked Questions

The radio technique, ARIA roles, overflow and deep links.

Yes. The state lives in a radio group, the labels switch the checked input, and a sibling selector reveals the matching panel. That is all CSS and HTML. It is also why the generated CSS contains one pair of rules per tab: each checked input has to point at its own label and its own panel.

The semantics. A screen reader announces a radio group rather than a tab list, there is no aria-selected to report which tab is current, and the panels are not associated with the tabs. Arrow key behaviour differs too: a radio group moves between options with the arrows and changes selection as it goes, which is close to the tab pattern by accident rather than by design.

A keyboard handler. The tab pattern expects the left and right arrows to move between tabs, Home and End to jump to the first and last, and only one tab in the tab order at a time, so Tab moves out of the strip into the panel. The handler in the output does those, and it is about fifteen lines.

Not with this CSS alone. With the radio version you can get close by reading the hash on load and checking the matching input, which is two lines of script and gives up the no JavaScript property. With the ARIA version you are already using script, so handling the hash there is straightforward. Either way, remember that content inside a hidden panel cannot be found by the browser page search.

Because the panels have different heights and only one is in flow at a time. If that is distracting, set a min-height on the panel container that fits your tallest panel, or use a grid where all panels occupy the same cell so the container takes the height of the largest. The generated CSS does neither, because both choices depend on your content.