Ink Slider
Solid ink-violet bar slides horizontally beneath the active tab. JS measures offsetLeft + offsetWidth so the bar matches each tab's exact width — no fixed-width assumption — and re-aligns on viewport resize.
Published
32 CSS Tab Designs
32 hand-coded CSS tabs — the general tabs mechanic hub covering SaaS dashboards, checkout flows, docs sites, and product settings: Linear/Vercel-style sliding pill with cubic-bezier glide, iOS segmented control (Apple HIG register), VS Code file tabs with language dots and traffic lights, brutalist press with hard 4px offset shadow, Notion pill nav with active label expand, Figma toolbar with morphing icons, Datadog status dots on a phosphor rail, editorial drop-cap tabs, Solari-flap CRT terminal, Bauhaus color blocks, Riso misregistration with mix-blend-mode overlay, Guardian broadsheet hairline frame, McSweeney slab-serif swash, and 19 more editorial + typographic patterns — mostly horizontal layouts. For a vertical-tabs-specific deep-dive (18 patterns covering pure CSS no-JS, responsive vertical → mobile accordion, SaaS settings panels, docs sidebars, WAI-ARIA keyboard nav) see CSS Vertical Tabs. 23 demos are pure CSS driven by :checked and :has() selectors; 9 use 30-60 lines of vanilla JavaScript for measured sliding indicators. Every widget uses real button or radio inputs with role="tablist" semantics, aria-selected, arrow-key navigation, Enter/Space commit, and :focus-visible rings — the WAI-ARIA Tab Pattern for accessible custom tabs. Scoped under .ttNN for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic.
Related18 CSS Vertical Tabs25 CSS Button Groups32 CSS Accordions — Vertical & Horizontal15 CSS Navigation Menu Designs
Neon Electric
Each tab owns its own electric accent via a CSS custom property. The active tab lights up with a neon border and a soft outer glow in its color. Pure CSS via radio inputs and
:has() panel switching.Published
Brutalist Press
Heavy uppercase tabs with hard 4px black offset shadows. Active tab presses flush — shadow collapses, button translates 4px down-right, color inverts. Tactile mechanical-keyboard feedback.
Published
Chromatic
Four color-coded tabs each with a dedicated tint, border, and active-state glow. Violet, rose, cyan, lime — each tab keeps its identity whether active or inactive. Pure CSS.
Published
VS Code Files
IDE-inspired file tabs with language-colored dots and editor chrome. The active tab lifts with a top accent stripe and matches the editor surface, just like VS Code. Pure CSS.
Published
iOS Segmented
Apple-style segmented control: gray track, white pill that physically slides between segments. JS measures positions live; resize-listener keeps the pill aligned at any width.
Published
Bento Grid
Three-column bento grid where the tabs themselves are the cards. The active card lifts, gains a colored top stripe, and the panel becomes the fourth bento cell underneath. Pure CSS.
Published
Vertical Dots
Sidebar nav with a connecting timeline rule. The active item's dot fills in solid teal with a soft outer glow; inactive dots stay hollow. Vertical layout. Pure CSS.
Published
CRT Terminal
Vintage CRT terminal aesthetic: green phosphor text, scanline overlay, macOS traffic lights in the title bar. Active tab shows a blinking caret cursor. Pure CSS.
Published
Morph Icon
Compact icon-only tabs that expand on activation: the label morphs in via a max-width transition, smoothly widening the active tab inline. Pure CSS, no positional JS.
Published
Typewriter
Activating a tab triggers a typewriter animation on the panel: text reveals via max-width steps animation, with a blinking cursor at the end. Pure CSS via radio inputs and steps() timing.
Published
Particle Burst
Each tab click spawns 8 small color sparks that fly outward and fade. JS positions each particle at the click point; CSS animates trajectory + fade. The active tab is also highlighted with a coral underline.
Published
Specimen No.
Tab labels read as letterpress specimen slugs. The active tab is announced by a 4-digit serial that flips digits on activation, and a mint underline draws under the active label.
PublishedUpdated
Cropped Letter
The active tab's first letter scales 14→32px, baseline-shifts down, and crops at the tab's right edge. Inactive labels stay at compact display size.
PublishedUpdated
Sidebar Nav
Vertical icon-driven nav inspired by hand-built dashboard sidebars. Dusty olive accent bar slides between rows; the active icon shifts left and a label slides in from behind it.
PublishedUpdated
Halo Tabs
Mobile-style nav-bar tabs in a soft white pill. Inactive icons are line-only grey. Activating a tab tints the icon mint, blooms a soft pink halo behind it, and slides the label in to the right of the icon — no underline, just the color shift and the label appearance.
PublishedUpdated
Two Weights
Pure type-weight contrast. Inactive sits at 200 hairline, active jumps to 900 black with a subtle scale lift. The brand violet underlines the active label.
PublishedUpdated
Underset Caps
Tiny uppercase mono labels above a single thick rule. The rule slides under the active label — measured live, like a sliding bookmark on a typecase shelf.
PublishedUpdated
Drop Cap
Inactive tabs are mono single-letter initials. The active tab unfolds into a rotating-and-scaling serif drop cap followed by the rest of the word; tail unfolds left-to-right.
PublishedUpdated
Stencil Cut
Active tab is a solid safety-yellow plate stamped on ink. Pure two-color print — black ink on yellow for the active label, muted yellow on ink for inactive. The 2px upward translate gives the yellow plate a small physical lift over the surrounding stage.
PublishedUpdated
Bracket Marks
The active tab is framed by typographic brackets —
[ on the left, ] on the right — that physically slide between tabs. A single shared pair of pseudo-elements does the work.PublishedUpdated
Bauhaus Block
Each tab is a distinct primary-color block. Active tab rises 6px and casts a hard offset shadow. Color and geometry as the entire indicator.
PublishedUpdated
Reverse Stamp
The whole bar is cream-on-crimson. The active tab inverts — crimson ink stamped on cream. A single-frame impact shadow flashes on activation, like a rubber stamp pressing in.
PublishedUpdated
Hairline Frame
Hairline-framed tabs in warm-white stock. Active tab's top edge thickens to 4px deep-navy AND four corner dots materialize at the frame's extremes — a Bodoni stroke-contrast move with editorial restraint.
PublishedUpdated
Pill Nav
Mobile-style bottom-nav with hot-pink active pill that grows around the active icon and label. Inactive items show only icons; activation adds the label inside the pill.
PublishedUpdated
Riso Misregistration
Two-color riso print on charcoal stock. Active tab is a solid orange block with a cyan plate misregistered 4px below-left, like a zine pulled with the cyan plate slightly off the orange. No swashes, no icons; just two color plates and a typographic punch.
PublishedUpdated
Slab Serif Swash
Italic slab-serif labels on warm-cream stock. The active tab gets a deep-emerald swash underline — a curved SVG stroke beneath the word, like a calligrapher's flourish on letterpress vellum.
PublishedUpdated
Specimen Card
The whole bar reads as a foundry specimen card. Foundry name on the left in tiny mono; tabs on the right are large display glyph specimens. On activation the foundry name pulses a single beat.
PublishedUpdated
Sliding Pill
Icon + label tabs on cream stock. A solid indigo pill is the indicator; it physically slides between tabs on click, with the active label inverting to cream.
PublishedUpdated
Folio Fold
Inactive tabs are flat sand-colored rectangles on charcoal. The active tab's top-right corner physically folds down 18px via clip-path with a darker fold-underside triangle, lifts 4px above its siblings, and shows a small fold preview on hover. Inactive tabs preview an 8px fold on hover so the mechanic is discoverable.
PublishedUpdated
Velvet Ribbon
Icon nav on warm-linen stock with a velvet aubergine ribbon trimmed in gilt. The ribbon hangs down from the top rail directly above the active icon — measured live so it stays perfectly aligned at any stage width. Jewel-toned, club-bookplate atmosphere.
PublishedUpdated
Inset Type
Active label sits inside a chiseled negative-space well. Inset shadow stack on a darker rectangle gives the impression letters are carved into brass-tinted slate. Pure CSS box-shadow, no images.
PublishedUpdated
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What makes these tab designs different from typical CSS tabs?
Each demo is built around a single bold gesture — sliding indicator, neon glow, brutalist shadow, color-coded segments, IDE chrome, terminal scanlines, particle burst, typewriter reveal, oversized numbers, stencil cuts, bracket marks. The focus is on the tab strip itself, not the content panel. Solid colors and geometric shapes throughout.
Are these tabs accessible?
Yes. Every demo uses real button elements (for JS-driven tabs) or radio inputs with paired label elements (for pure-CSS tabs), keeping keyboard navigation and screen-reader semantics native. Visible focus rings via :focus-visible. No ARIA hacks. All animations honor prefers-reduced-motion. For a strict WAI-ARIA tabs pattern, wrap the nav in role=tablist, add role=tab plus aria-selected on each trigger, role=tabpanel on each panel, and roving tabindex with Left/Right arrow-key navigation.
Do these tabs work without JavaScript?
23 of the 32 demos are Pure CSS — they ship HTML + CSS only and switch panels via radio inputs and :has() / :checked selectors. The remaining 9 demos (Ink Slider, iOS Segmented, Particle Burst, Specimen No., Sidebar Nav, Underset Caps, Bracket Marks, Sliding Pill, Velvet Ribbon) carry small focused JS snippets to drive their positional indicators (sliding rules, sliding pills, sliding ribbons) and re-align them on viewport resize. Each demo carries only its own indicator code — never dead code from other demos.
Are the demos responsive?
Yes — every demo is built to work at any viewport width. Defensive CSS includes width: 100%, box-sizing: border-box, min-width: 0 on flex children, flex-shrink: 0 on icons, and text-overflow: ellipsis on labels. Every JS-driven positional indicator adds a window resize listener so the indicator stays locked to its active tab when the viewport changes — same behavior in the gallery preview, the Try-it playground, and your own paste.
Can I swap the colors and fonts?
Yes. Every demo uses solid hex values in plain CSS — no design tokens, no preprocessor variables. Pick the demo you like, copy the HTML + CSS + JS into your project, and find/replace the accent values (#231c48 ink violet, #4ade80 phosphor green, #d4437f hot pink, #38bdf8 sky cyan, #fbbf24 amber, etc.) with your own brand colors.
Which tab pattern should I use for a SaaS billing / pricing plan switcher, and how does it interact with Stripe / Chargebee flows?
Ship Demo 06 iOS Segmented or Demo 17 Sliding Pill for a two-to-three-plan billing switcher — both are the register Linear, Vercel, Stripe checkout, and Chargebee's own dashboard converged on. The iOS segmented pattern (rounded gray track at rgba(120, 120, 128, 0.16) with a sliding white pill on cubic-bezier(0.4, 0, 0.2, 1)) reads instantly as reversible and tier-1 audiences trust the Apple-HIG idiom for money decisions; the Sliding Pill (indigo #3b3a8c pill on cream stock #f4f3ee, cubic-bezier(0.65, 0, 0.35, 1) glide over 500ms) is the same mechanic in a Linear/Vercel palette. Both use offsetLeft plus offsetWidth measurement in a small IIFE and add a window resize listener so the pill stays locked when the viewport reflows or when Stripe.js swaps the Elements iframe height mid-checkout. Integration checklist for Stripe Elements: mount the tabs above the card element (never as a sibling of the card iframe or Stripe.js recomputes iframe geometry on every tab-switch), pass the tab state to your billing API as a hidden input value or a query param, and mirror the checked state in your server-rendered HTML so a page reload after a failed 3DS challenge lands on the correct plan tab. Chargebee's hosted checkout accepts a plan_id param — your tab-switch handler writes to that param and calls window.chargebee.getPortalInstance().open() to relaunch checkout in the correct plan context. Accessibility: promote the tab wrapper to role=radiogroup with aria-label='Billing frequency', give each option role=radio plus aria-checked, and mirror the sliding indicator on :focus-within so keyboard traversal is legible. WCAG 2.1 SC 4.1.2 requires the aria-checked state; SC 2.5.5 requires a 24px minimum tap target (iOS pill defaults to 32px so this passes by default). SC 1.4.3 requires 4.5:1 contrast on the active-label ink — the white pill on iOS gray hits 12.6:1. This pattern serves the highest-CPM SaaS pricing keywords in the tier-1 US/CA/UK/AU/NZ market — $15-25 RPM on average, spiking to $25-40 during Q4 renewal cycles. If your billing page has more than three plan options, move to Demo 08 Vertical Dots so the labels stack vertically without truncating.
How do I build a healthcare or insurance dashboard tab system that meets HIPAA and WCAG 2.1 requirements?
Regulated verticals need Demo 08 Vertical Dots or Demo 12 Hairline Frame — both prioritize semantic HTML over motion and pass a strict accessibility audit without modification. HIPAA does not directly regulate CSS or JS, but the Security Rule (45 CFR 164.312) and the ONC's 2015 Edition Health IT Certification Criteria require that Protected Health Information (PHI) UIs remain operable via keyboard (WCAG 2.1 SC 2.1.1), announce state changes to assistive tech (SC 4.1.3), and not depend on color alone (SC 1.4.1) — patient portals cited in OCR breach reports (Anthem, Premera, Excellus) have failed HIPAA audits partly on inaccessible clinical UIs. The Vertical Dots demo (dark charcoal ground, phosphor-cyan rule at 18% opacity, pulsing active dot at #38bdf8) uses radio inputs so keyboard tabs and arrow keys work natively; the Hairline Frame demo (warm-white stock, deep-navy ink, 4px pre-reserved top border) reads as neutral clinical UI without pushing motion. Both need three additions for a HIPAA-adjacent build: (1) role=tablist with aria-orientation=vertical, role=tab plus aria-selected on each button, role=tabpanel on each panel with matching aria-labelledby; (2) an off-screen span with visually-hidden text announcing 'Currently viewing tab N of 3' via aria-live=polite so JAWS and NVDA users hear tab changes without opening a panel that renders PHI; (3) a session-timeout warning tied to the tab component's aria-live region since HHS OCR interpretive guidance requires PHI UIs to warn on inactivity. Do NOT ship Demos 02 Neon Electric, 06 iOS Segmented with the full glide, or 32 Particle Burst on a PHI-facing surface — motion above 3Hz plus color-coded state changes fail SC 2.3.1 flash thresholds and OCR treats WCAG failures as a material accessibility gap in enforcement actions. Insurance quote portals (Progressive, Geico, State Farm claims dashboards) use the Hairline Frame register for the same reason: neutral typography, no color-alone state, keyboard-first. This vertical carries the highest CPMs in tier-1 US ($30-60 RPM for healthcare, $40-80 for insurance) — worth the extra ARIA plumbing.
Which tab pattern works for a legal firm, mortgage lender, or high-CPM tier-1 regulated services website?
Ship Demo 12 Hairline Frame or Demo 19 Velvet Ribbon for legal, mortgage, financial-advisor, and fiduciary contexts — both carry the heritage-institutional register that tier-1 legal and lender audiences read as trustworthy. The Hairline Frame demo (0.5px deep-navy strokes on warm-white #f5f1ea stock, editorial serif at 13px, 4px pre-reserved top border in Swiss modernist tradition) is the register you see on White & Case, Skadden, Cravath, Wachtell, Wells Fargo Private Bank, and Fidelity Institutional. The Velvet Ribbon demo (aubergine #3d1e4a ribbon on linen #f5efe0 stock, gilt hem at #e6c149, uppercase 0.12em letter-spacing labels) reads more heritage-boutique — think Vanguard, T. Rowe Price, Bessemer Trust, Northern Trust. Legal and mortgage requirements: (1) ABA Model Rule 7.1 (Communications Concerning a Lawyer's Services) requires legal-firm websites to avoid false or misleading statements — the neutral typography of Hairline Frame is a defensible choice because it does not overpromise via visual gimmicks; (2) TILA/RESPA disclosures on mortgage-lender sites must be readable at 200% zoom per CFPB guidance, and both Hairline Frame and Velvet Ribbon pass 200% zoom without breaking (the pre-reserved 4px top border on Hairline Frame is critical here — tab activation does not shift the layout, so screen readers do not re-announce the whole panel on state change); (3) FINRA Rule 2210 governs financial-advisor communications and requires that all promotional language be balanced — the neutral register of both demos avoids FINRA-flagged sensationalism. Add role=tablist with aria-label='Practice areas' or 'Loan products', role=tab plus aria-selected on each label, role=tabpanel with aria-labelledby matching, and roving tabindex with Left/Right arrow-key handling. WCAG 2.1 SC 1.4.3 requires 4.5:1 contrast — verify the deep-navy #1a2842 on #f5f1ea (hits 11.8:1 comfortably) and the aubergine #3d1e4a on #f5efe0 (hits 10.4:1). This vertical carries the highest CPMs on codefronts.com: legal $30-60 RPM, mortgage $30-50 RPM, financial-advisor $25-45 RPM — spec into the highest-conversion demos for tier-1 US/CA/UK/AU/NZ traffic.
Related collections
32 CSS Accordions — Vertical & Horizontal
32 free CSS accordions covering pure-CSS FAQ blocks with details/summary, mobile navigation menus, e-commerce filter sidebars, nested tree views, exclusive single-open groups and smoothly animated height:auto — plus 26 visual variations in vertical, horizontal and hybrid layouts. Copy-paste HTML and CSS, no JavaScript.
39 CSS Breadcrumbs
39 hand-coded CSS breadcrumbs — Schema.org BreadcrumbList Microdata + WCAG 2.2 accessible (Google Rich Results eligible), :has() responsive collapse, dark/light theme toggle with color-mix, Shopify/Amazon e-commerce filter chip removal, Vercel/Linear/Notion SaaS dashboard app-shell pattern, Docusaurus/Mintlify sticky scroll-shrink header, Amazon-style dropdown sibling menus, NFT/Web3 holographic shimmer (@property + conic-gradient), SaaS marketing gradient text, Airbnb filter chip with container queries, editorial blog wave underline, developer docs one-click path copy (Clipboard API), and 26 more. Semantic HTML: <nav aria-label='Breadcrumb'> + <ol> + aria-current='page'. Framework-agnostic, MIT-licensed.
26 CSS Circular Menus
26 hand-coded CSS circular and radial menu designs, from the floating-action FAB speed dial and dashboard radial hubs to game-style pie-slice wheels, SVG gooey metaball fans, hexagonal honeycombs, iris-aperture reveals, orbiting satellites on offset-path, compass-rose directional nav, sci-fi HUD rings, glassmorphism popovers built on the native Popover API, vinyl-record players, and full-takeover nebula overlays on native dialog. Every design uses CSS trigonometry (sin(), cos()) or the counter-rotation trick for positioning, ships real keyboard navigation, aria-labels on icon-only buttons, and a prefers-reduced-motion guard. Copy-paste HTML, CSS and vanilla JS with zero framework dependencies — MIT licensed.