Awesome CSS Tabs You Can Use Yourself

Q: Are CSS-only tabs accessible?

Basic CSS tabs work with screen readers when proper semantic markup and ARIA roles exist. Full keyboard navigation per WAI-ARIA patterns typically requires JavaScript. Add tablist, tab, and tabpanel roles for assistive technology support.

Summarize this article with:

ChatGPT Claude Perplexity Grok

Tabs solve a universal problem: too much content, not enough space.

These CSS tabs examples show you how to build tabbed interfaces that organize information cleanly without overwhelming users.

You will find pure CSS methods using radio buttons, the :target selector, and other techniques that require zero JavaScript.

Each approach includes working code you can copy and adapt.

This guide covers horizontal and vertical layouts, responsive behavior for mobile screens, accessible markup patterns, and popular design styles like underlined, boxed, and pill tabs.

Whether you need a simple content switcher or a polished tab component for production, these examples give you the foundation to build it.

What Are CSS Tabs

CSS tabs are a user interface component that organizes content into multiple panels.

Only one panel displays at a time.

Users click tab headers to switch between content sections, making large amounts of information digestible without endless scrolling.

The tab component consists of two parts: the tab navigation (clickable headers) and the tab content panels (the actual content blocks).

This UI pattern appears everywhere. Settings pages, product descriptions, pricing comparisons, documentation sites.

You can build tabs with pure CSS, or combine CSS with JavaScript for more complex behavior.

Frameworks like Bootstrap offer pre-built tab components that speed up development.

CSS tabs examples

Tabs with a Side of Icons

See the Pen
Featured Tabs by Richard Gonyeau (@RGonyeau)
on CodePen.

Moody CSS Tabs

See the Pen
CSS Tabs Revisited by Eric Sadowski (@ejsado)
on CodePen.

Icon-Loaded Tabs

See the Pen
Pure CSS Tabs With Indicator by Álvaro (@alvarotrigo)
on CodePen.

The Understated Tab

See the Pen
Simple CSS tabs with shadow by Nazar Ilkiv (@ekscentrysytet)
on CodePen.

Hue-Shift Tabs

See the Pen
Pure CSS Color Tabs (no label) by ari (@tari)
on CodePen.

The Folder-Inspired Tab

See the Pen
css tabs by massimo (@_massimo)
on CodePen.

Zoom In, Zoom Out Tabs

See the Pen
Tabby Tabs by Álvaro (@alvarotrigo)
on CodePen.

The Chic Tab

See the Pen
Pure CSS Tabs Widget by SitePoint (@SitePoint)
on CodePen.

Skyscrapers of Tabs

See the Pen
Vertical tabs with smooth animation by Benjamin Koehler (@codesuey)
on CodePen.

The Foodie’s Delight

See the Pen
Recipe card with css tabs by Gisete Kindahl (@gk)
on CodePen.

Flexin’ Those Tabs

See the Pen
Responsive pure CSS tabs & accordion by Álvaro (@alvarotrigo)
on CodePen.

Tab Dance

See the Pen
Adaptive tabs by Lewi Hussey (@Lewitje)
on CodePen.

Pure Minimalism

See the Pen
Pure CSS Tabs by Álvaro (@alvarotrigo)
on CodePen.

The Animated Artist

See the Pen
Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl)
on CodePen.

Center Stage Tabs

See the Pen
Pure CSS Tabs by Álvaro (@alvarotrigo)
on CodePen.

Designer’s Delight

See the Pen
Tab bar active animation – CSS only by Heiko Bublitz (@he1ko)
on CodePen.

Elastic Fantastic

See the Pen
Tabs with elastic border by Irem Lopsum (@iremlopsum)
on CodePen.

The Showstopper

See the Pen
Add file tab bar animation by Live_Fast_Die_Last (@codepen_codepen)
on CodePen.

The Iconic Choice

See the Pen
responsive tabs by Álvaro (@alvarotrigo)
on CodePen.

Fluid Flow

See the Pen
Fluid tab bar by Shyam (@Shtam3x)
on CodePen.

Pure Pizzazz

See the Pen
CSS3 Tabs by Sorax by YozhEzhi (@YozhEzhi)
on CodePen.

Beaming Tabs

See the Pen
Light & Sexy Tabs by Alex Lime (@alexlime)
on CodePen.

Rainbow Rider

See the Pen
css tabs clip-path by Álvaro (@alvarotrigo)
on CodePen.

The Top Tier

See the Pen
Material Expanding Overlay – Top-Aligned Tabs by Tony Tomlinson (@ibb)
on CodePen.

Simple Elegance

See the Pen
Simple pure css tabs by Sean B (@seanysean)
on CodePen.

Tab Tumble

See the Pen
Pure CSS Tabs that scale down to menu by Álvaro (@alvarotrigo)
on CodePen.

Snapshot Sensation

See the Pen
Tab bar photo/video switch by Aaron Iker (@aaroniker)
on CodePen.

High & Mighty

See the Pen
Transitioning Between Variable Heights with CSS Tabs by Joseph Fusco (@fusco)
on CodePen.

Android-esque Elegance

See the Pen
Android Tab Bar in CSS by Niall Paterson (@paterson)
on CodePen.

Tab it Right

See the Pen
NoScript Tabs Menu with Images by Michael Rosata (@mrosata)
on CodePen.

Map it Out

See the Pen
Materialize-Tab/Googlemap by Ian (@zzzian)
on CodePen.

How Do CSS-Only Tabs Work

Pure CSS tabs use clever selector tricks to show and hide content without any scripting.

The most common methods rely on the :checked pseudo-class with radio buttons, or the :target selector with URL fragments.

Here is how the radio button method works:

Hidden radio inputs connect to visible label elements (the tab headers)
Each radio input associates with a specific content panel
CSS uses the :checked state to display the matching panel
The adjacent sibling selector (~) targets content based on which input is selected

The browser handles all the state management. No event listeners needed.

CSS-only tabs have limitations though. Complex animations, dynamic content loading, and keyboard navigation patterns often require JavaScript.

What Are the Methods to Create CSS Tabs

Four primary techniques exist for building tabs without JavaScript. Each has specific strengths and trade-offs.

Pure CSS Tabs with Radio Buttons

Radio buttons naturally allow only one selection, perfect for tab behavior. Hide the inputs with CSS, style the labels as tab headers, use :checked to control panel visibility.

This method offers the best browser support and works reliably across Chrome, Firefox, Safari, and Edge.

CSS Tabs with :target Selector

The :target pseudo-class matches elements whose ID appears in the URL hash. Clicking a tab link updates the URL, which triggers the corresponding panel to display.

Downside: it creates browser history entries for each tab click and can interfere with page scroll position.

CSS Tabs with :focus-within

This newer approach uses the :focus-within pseudo-class to show content when any child element receives focus. Works for keyboard users but loses state when focus moves elsewhere.

Limited practical use. Better suited for dropdown menus than persistent tab interfaces.

CSS Tabs with Details and Summary Elements

HTML provides native disclosure widgets through details and summary elements. They work as accordion-style tabs with built-in accessibility.

The toggle state persists without CSS hacks, but styling options are more restricted than other methods.

What HTML Structure Do CSS Tabs Require

Proper markup matters for both functionality and web accessibility.

The basic structure needs these elements:

Container element wrapping the entire tab component
Tab list holding all clickable tab headers
Individual tab triggers (buttons, labels, or links)
Content panels for each tab section

For the radio button method, inputs must appear before their associated content panels in the DOM. The CSS sibling selectors only work in one direction.

Add ARIA roles for screen reader support: role=”tablist” on the container, role=”tab” on headers, role=”tabpanel” on content sections.

The aria-selected and aria-hidden attributes communicate state changes to assistive technologies.

How to Style CSS Tab Headers

Tab headers need clear visual hierarchy. Users must instantly identify which tab is active.

Core styling considerations:

Active state with distinct background color or border treatment
Hover effects providing interaction feedback
Focus indicators for keyboard navigation (never remove outlines without alternatives)
Consistent spacing using padding and margins

Flexbox handles horizontal tab layouts cleanly. Set the tab list as a flex container, distribute items with justify-content.

For the active indicator, a bottom border or background color change works best. Some designs use an animated underline that slides between tabs.

Keep transition effects subtle. A 200-300ms duration feels responsive without being sluggish.

Test your tab styling across viewport sizes. What looks good on desktop might need adjustments for mobile through responsive design techniques.

How to Style CSS Tab Content Panels

Content panels need consistent padding, clear boundaries, and smooth visibility transitions.

Hide inactive panels with display: none or a combination of opacity: 0, visibility: hidden, and position: absolute. The second approach allows fade transitions.

Key styling properties:

Padding of 16-24px creates breathing room
Border or background color separates content from surrounding elements
Min-height prevents layout shifts when switching tabs
Overflow handling for content that exceeds panel dimensions

Match panel borders to tab header styling for visual continuity. A connected appearance makes the component feel unified.

What Are Vertical CSS Tabs

Vertical tabs stack headers in a column along the left or right side, with content panels beside them.

Best for interfaces with many tabs or long tab labels. Dashboard layouts, settings panels, and documentation sidebars use this pattern frequently.

Implementation requires flexbox or grid system layouts. Set flex-direction: row on the container, let headers stack vertically while content fills remaining horizontal space.

Vertical orientation often converts to horizontal on smaller screens through media queries.

What Are Responsive CSS Tabs

Responsive tabs adapt to different viewport sizes without breaking functionality.

Common adaptation strategies:

Convert to accordion layout on mobile
Enable horizontal scrolling for tab headers
Stack tabs vertically below certain breakpoints
Use dropdown menu for tab selection

The accordion conversion works well because it uses the same show/hide logic. Tab headers become clickable accordion triggers.

Test touch targets on mobile. Tab headers need minimum 44×44 pixel hit areas for comfortable tapping.

A mobile-first design approach starts with the simplified layout, then adds complexity for larger screens.

How Do Accessible CSS Tabs Work

Accessible tabs support keyboard navigation, screen readers, and users with various disabilities.

Required keyboard interactions per WAI-ARIA patterns:

Tab key moves focus to the active tab header
Arrow keys navigate between tab headers
Enter or Space activates the focused tab
Home and End jump to first and last tabs

Pure CSS tabs struggle here. Keyboard support beyond basic tabbing typically requires JavaScript event handlers.

Screen reader requirements include proper role assignments, aria-selected states, and aria-controls linking tabs to panels.

Maintain sufficient color contrast between text and backgrounds, especially for active state indicators. WCAG requires 4.5:1 ratio for normal text.

Following inclusive design principles benefits all users, not just those with disabilities.

What Are Common CSS Tab Design Patterns

Four design patterns dominate modern tab interfaces. Each creates distinct visual hierarchy and suits different contexts.

Underlined Tabs

A bottom border highlights the active tab. Clean, minimal, works with most design systems. Material Design and Google products use this pattern extensively.

Boxed Tabs

Active tabs connect visually to content panels through matching borders. Traditional look, clear boundaries. The inactive tabs appear slightly recessed or separated.

Pill-Style Tabs

Rounded backgrounds wrap each tab header. Active state uses filled background, inactive stays transparent or subtle. Popular in modern frontend frameworks and mobile apps.

Card-Style Tabs

Each tab resembles a physical card or folder tab. Overlapping edges, shadow effects, dimensional appearance. Works well when tabs need strong visual separation, similar to CSS card components.

What CSS Properties Control Tab Appearance

Several property categories handle different aspects of tab styling.

Layout properties: display (flex, grid), position, z-index for stacking active tabs above inactive ones.

Box model: padding, margin, border, border-radius for rounded corners.

Visual styling: background-color, color, box-shadow, opacity.

State handling: cursor, outline for focus states, pointer-events to disable interaction.

Transitions: transition-property, transition-duration, transition-timing-function for smooth state changes.

The z-index property matters when tabs overlap or when active tabs need to appear connected to content panels.

How to Add Transitions to CSS Tabs

Smooth transitions improve user experience by providing visual feedback during state changes.

Basic fade transition on panels:

Set opacity: 0 on hidden panels instead of display: none
Add transition: opacity 0.3s ease
Switch to opacity: 1 when active

For sliding tab indicators, use CSS keyframes or transform properties with absolute positioning.

The transform: translateX() approach moves an indicator element beneath tabs. Calculate position based on which tab is active.

Micro-interactions like subtle hover animations and focus rings add polish. Keep durations under 400ms to maintain responsiveness.

Complex animation sequences might require JavaScript for timing coordination between multiple elements.

What Are the Limitations of CSS-Only Tabs

CSS tabs work for simple use cases but hit walls quickly.

Major limitations:

No dynamic content loading without JavaScript
Limited keyboard navigation control
URL hash pollution with :target method
No programmatic tab switching
Difficult to sync with external state or frameworks

Cross-browser compatibility varies for newer pseudo-classes like :focus-within. Older browsers may need fallbacks.

Deep linking to specific tabs requires the :target approach, which creates side effects with browser history and scroll behavior.

When Should You Use JavaScript for Tabs Instead

JavaScript becomes necessary when requirements exceed CSS capabilities.

Use JavaScript when you need:

Full keyboard navigation per ARIA specifications
Dynamic content loading via Ajax
Integration with React, Vue, or other interactive elements
Programmatic tab control from other components
Complex page transitions between tabs
Analytics tracking for tab interactions

Libraries like jQuery tabs provide pre-built accessible implementations. Modern frameworks include tab components with full accessibility support.

The choice depends on project requirements. Simple marketing pages can use CSS-only. Web applications with complex state management benefit from JavaScript solutions.

FAQ on CSS Tabs

How do I create tabs using only CSS?

Use hidden radio inputs paired with label elements as tab headers. Apply the :checked pseudo-class to control which content panel displays. The sibling selector (~) targets panels based on radio button state, eliminating JavaScript dependency entirely.

What is the difference between CSS tabs and JavaScript tabs?

CSS tabs handle state through selectors like :checked or :target. JavaScript tabs offer programmatic control, dynamic content loading, and full keyboard navigation. Choose CSS for simple interfaces, JavaScript for complex usability requirements.

How do I make CSS tabs responsive?

Convert tabs to accordion layout on smaller screens using breakpoint rules. Enable horizontal scrolling for tab headers or stack them vertically. Test touch targets meet minimum 44px size for comfortable mobile interaction.

Can I create vertical tabs with CSS?

Set the container to display: flex with flex-direction: row. Tab headers stack in a column while content panels fill remaining horizontal space. This layout works well for dashboard interfaces with many navigation options.

How do I style the active tab state?

Target the :checked state for radio button tabs or :target for URL-based tabs. Apply distinct background colors, border treatments, or shadow effects to differentiate active headers from inactive ones visually.

Are CSS-only tabs accessible?

Basic CSS tabs work with screen readers when proper semantic markup and ARIA roles exist. Full keyboard navigation per WAI-ARIA patterns typically requires JavaScript. Add tablist, tab, and tabpanel roles for assistive technology support.

How do I add animation to CSS tabs?

Use opacity transitions instead of display: none for fade effects. Apply transform properties for sliding indicators. Keep durations between 200-300ms for responsive feedback. Complex sequenced animations may require animation libraries or JavaScript timing.

What HTML structure do CSS tabs need?

A container wraps the component. Radio inputs appear before content panels in DOM order. Labels act as clickable headers. Each panel connects to its corresponding input through CSS selectors. Proper hierarchy enables sibling-based styling.

How do I link directly to a specific tab?

Use the :target selector method with anchor links. Each tab panel gets a unique ID. Clicking links with matching hash fragments activates corresponding panels. Note this creates browser history entries and may affect scroll behavior.

Which browsers support CSS-only tabs?

Radio button and :target methods work in all modern browsers including Chrome, Firefox, Safari, and Edge. The :focus-within approach has limited support in older browsers. Test thoroughly and provide fallback states when needed.

Conclusion

These CSS tabs examples give you practical starting points for building tabbed interfaces that actually work.

The radio button method handles most use cases. The :target approach adds deep linking when you need it.

Pick the technique that matches your project requirements. Simple content organization rarely needs JavaScript overhead.

Focus on accessibility from the start. Screen reader support and keyboard navigation matter more than fancy animations.

Combine tabs with other UI components like CSS modals, dropdown menus, and toggle switches to create complete interfaces.

Test across browsers and devices. What works in Chrome might behave differently in Safari.

Start with the simplest implementation, then add complexity only when needed. Your users will thank you for the clean, fast experience.