Live preview Tabs
Savanna Divided Tabs
Hairline dividers separate the tabs and quietly step aside around the active one.
Tabs — 100 CSS effects
Tabbed panels and segmented controls driven by radio inputs.
Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.
Page 1 of 2
Live preview Tabs
Marble Topline Tabs
A veined marble bar with the indicator on its top edge and a popping panel.
Live preview Tabs
Chalk Rounded Tabs
One soft rounded shell with the content above and a chalk thumb sliding below.
Live preview Tabs
Cobalt Stepper Tabs
Numbered cobalt nodes on a rail, with the connecting line filling as you advance.
Live preview Tabs
Nickel Notch Tabs
A small pointer notch slides under the active tab and aims at the panel below.
Live preview Tabs
Summit Full Width Tabs
Three edge to edge cells split the full width and the chosen one fills to the seams.
Live preview Tabs
Aurora Bottom Dock Tabs
A mobile bottom navigation dock where the chosen icon lifts and glows aurora green.
Live preview Tabs
Brass Pill Tabs
A polished brass pill slides behind the labels while the panels cross fade.
Live preview Tabs
Caliper Region Tabs
A pair of caliper jaws slides along the bar and grips the active region.
Live preview Tabs
Drift Light Leak Tabs
A warm film light leak drifts across the panel each time a different tab is opened.
Live preview Tabs
Flint Sideline Tabs
A left hand rail marks the active row and the whole label steps inward.
Live preview Tabs
Forge Numbered Tabs
Each tab carries a numbered disc that turns white hot when it is opened.
Live preview Tabs
Frost Underline Tabs
A frosted tab bar where a glowing underline glides beneath the active label.
Live preview Tabs
Lattice Unit Tabs
A unit switcher on a lattice grid where the reading flips over on each change.
Live preview Tabs
Mica Hairline Tabs
Uppercase spaced labels over a single hairline that glides between them.
Live preview Tabs
Monsoon Two Column Panel Tabs
The panel is split in two: a rainfall figure on the left, the reading on the right.
Live preview Tabs
Orbit Neumorphic Tabs
Soft moulded keys press inward and a pale light keeps orbiting the chosen one.
Live preview Tabs
Pylon Filter Tabs
A pylon mast rises over the active filter and the chip list underneath swaps.
Live preview Tabs
Ridge Step Form Tabs
A three step wizard where diamond nodes light up and a dotted ridge links them.
Live preview Tabs
Shaft Bottom Bar Tabs
The tab strip sits under the panel and a shaft pin rises into whichever is open.
Live preview Tabs
Spiral Halftone Tabs
A printed dot screen where the panel turns into place as the halftone rotates behind it.
Live preview Tabs
Topaz Terminal Tabs
A small terminal window whose tab strip switches monospace panes with a blinking caret.
Live preview Tabs
Tundra Theme Picker Tabs
Swatch tabs repaint the preview card below instead of swapping its content.
Live preview Tabs
Willow Hover Preview Tabs
Hovering grows a faint half underline first, so the click only completes the line.
Live preview Tabs
Amber Segment Control
An iOS style segmented control with a springy amber thumb and scaling panels.
Live preview Tabs
Anvil Status Filter Tabs
Status filters with a heavy two pixel frame and no shadow, struck flat.
Live preview Tabs
Arc Vapor Tabs
A vaporwave grid horizon where the underline swings along a shallow arc, not a line.
Live preview Tabs
Basalt Icon Tabs
Icon only tabs cut from dark basalt with an ember bar riding the top edge.
Live preview Tabs
Bearing Difficulty Tabs
Difficulty tabs counted in bearing balls that seat themselves when chosen.
Live preview Tabs
Bloom Monochrome Tabs
Pure black and white with no colour at all; the active label gains weight and blooms.
Live preview Tabs
Canyon Month Tabs
Calendar month tabs painted in canyon strata, each opening its own week strip.
Live preview Tabs
Cascade Icon Swap Tabs
Each tab flips its hollow icon over to a solid one the moment it becomes active.
Live preview Tabs
Chassis Density Tabs
Density tabs that stretch the same three rows instead of replacing them.
Live preview Tabs
Circuit View Switcher Tabs
Board style tabs that swap the panel between a list, a grid and a bar chart.
Live preview Tabs
Coil Carton Tabs
Corrugated cardboard tabs whose panel unrolls out of its own top left corner.
Live preview Tabs
Conduit Sort Direction Tabs
Two tabs flip one shared list end over end instead of swapping panels.
Live preview Tabs
Copper Badge Tabs
Each tab carries a count badge and the active one pulses in warm copper.
Live preview Tabs
Coral Icon Text Tabs
Icon and label together; the icon tilts and grows while an underline opens outward.
Live preview Tabs
Cove Peeking Carousel Tabs
Panels ride a horizontal track, the neighbours peeking dimmed at the edge of the frame.
Live preview Tabs
Cusp Cartoon Tabs
Thick outlined comic tabs that squash and spring back the moment they are picked.
Live preview Tabs
Dash Sketch Tabs
Hand drawn boxes on a notebook where a pencil dash is redrawn under the active tab.
Live preview Tabs
Delta Language Tabs
A language picker whose two letter code chip fills in as the greeting swaps below.
Live preview Tabs
Dune Right Aligned Tabs
Tabs pushed to the right of a titled bar, marked by a widening sand coloured rule.
Live preview Tabs
Dynamo Tracking Tabs
The active label spreads its letters apart while a charge line sweeps beneath it.
Live preview Tabs
Echo Pixel Tabs
An eight bit console strip where the marker jumps in visible pixel steps, never smoothly.
Live preview Tabs
Ember Subtitle Tabs
Every tab carries a small caption line that catches fire when the tab is chosen.
Live preview Tabs
Fjord Billing Period Tabs
A billing period switch with a sliding thumb, a saving badge and a swapping price.
Live preview Tabs
Flange Tier Tabs
Tier tabs where a bolted flange ring fills solid on the plan you open.
Live preview Tabs
Flux Holographic Tabs
An iridescent foil surface whose rainbow sheen keeps travelling over the chosen tab.
Live preview Tabs
Garnet Slide Tabs
Deep garnet chips select a panel that slides in from the right on every switch.
Live preview Tabs
Gasket Turning Panel Tabs
Panels seat themselves with a combined scale and rotation, like a gasket ring.
Live preview Tabs
Gear Payment Method Tabs
Payment method tabs where the cog of the chosen method keeps turning slowly.
Live preview Tabs
Girder Report Type Tabs
Report tabs sitting on a truss whose zigzag shifts under the active span.
Live preview Tabs
Glacier Package Manager Tabs
Install command tabs for three package managers with a cold monospace command line.
Live preview Tabs
Gleam Lacquer Tabs
Deep lacquered plates where a narrow specular highlight sweeps over the open tab.
Live preview Tabs
Glide Glass Tabs
A frosted glass pane stretches as it glides between the labels of the bar.
Live preview Tabs
Granite Gradient Tabs
The active tab fills with a granite gradient while the panel rail slides sideways.
Live preview Tabs
Halo Mist Tabs
A soft aura swells out of the chosen tab while the panel resolves out of a haze.
Live preview Tabs
Harbor Editor File Tabs
Editor style file tabs with a dirty dot and a close cross that appears on the active sheet.
Live preview Tabs
Hush Noir Tabs
Venetian blind shadows across a dark room, with one spotlight moving between the tabs.
Live preview Tabs
Ivory Progress Tabs
An ivory progress line under the panel grows as later tabs are selected.
Live preview Tabs
Jade Outline Tabs
Selecting a tab fires a jade ring that expands out of its rounded outline.
Live preview Tabs
Kiln Stacked Icon Tabs
Tabs stack a glyph over its label and the active glyph glows kiln orange.
Live preview Tabs
Kindle Riso Print Tabs
Two risograph ink layers start out of register and snap together on the chosen tab.
Live preview Tabs
Lagoon Side Rail Tabs
A vertical rail on the left points a small arrow into the wide panel it opened.
Live preview Tabs
Lapis Scale Tabs
A small dot marks the active tab and the panel scales up out of a blur.
Live preview Tabs
Lever Tilt Tabs
The chosen tab tips over its pivot and the panel swings in from the same hinge.
Live preview Tabs
Lull Origami Tabs
Folded paper facets where the panel drops open on a crease along its top edge.
Live preview Tabs
Meadow Thumbnail Tabs
Gallery thumbnails act as tabs and the full frame above cross fades with its caption.
Live preview Tabs
Mesa Right Side Tabs
The tab column sits on the right and a stone coloured rail rides down beside it.
Live preview Tabs
Oasis Sort Filter Tabs
Sort chips with a turning arrow, reordering a short result list one row at a time.
Live preview Tabs
Obsidian Hover Tabs
Hovering previews a tab in indigo before the click; the panel rises from below.
Live preview Tabs
Onyx Folder Tabs
Browser style folder tabs whose active sheet merges into the panel below.
Live preview Tabs
Opal Thick Underline
A thick underline drifts between tabs while its opal gradient keeps shifting.
Live preview Tabs
Pearl Minimal Tabs
No chrome at all: the active label simply brightens and opens its letter spacing.
Live preview Tabs
Piston Time Range Tabs
Time range tabs whose piston head plunges down into the selected window.
Live preview Tabs
Prairie Growing Panel Tabs
The panel box grows or shrinks to the height each tab actually needs, in one motion.
Live preview Tabs
Pulse Brutalist Tabs
Heavy unrounded blocks with a hard offset shadow that springs into place on click.
Live preview Tabs
Quartz Vertical Tabs
A vertical tab column with a violet rail that travels along the right edge.
Live preview Tabs
Quiver Mosaic Tabs
Stained glass tabs over dark grout whose panel tiles light up one after another.
Live preview Tabs
Ratchet Account Type Tabs
A pawl steps across a toothed rack to pick between two account types.
Live preview Tabs
Reef Centered Pill Tabs
Centred pill tabs on an open bar; the active pill keeps breathing in coral light.
Live preview Tabs
Ripple Minimal Tabs
Hairline Japanese layout with wide breathing room where the labels answer in a wave.
Live preview Tabs
Rivet Auth Form Tabs
Riveted plates switch between a sign in and a sign up form with real fields.
Live preview Tabs
Ruby Card Tabs
Three small cards act as tabs and the chosen one lifts with a ruby glow.
Live preview Tabs
Slate Boxed Tabs
Separate slate boxes lift on selection and the panel rises into place.
Live preview Tabs
Socket Privacy Tabs
Privacy levels shaped as sockets; the pin drops into the one you pick.
Live preview Tabs
Spindle Code Preview Tabs
A preview and code pair whose spindle keeps turning on whichever side is open.
Live preview Tabs
Sway Terminal Tabs
A green phosphor console whose output drops open like a curtain behind the scanlines.
Live preview Tabs
Tether Divider Tabs
Hairline dividers split the tabs and a tether drops from the active one to the panel.
Live preview Tabs
Thicket Display Type Tabs
Oversized display words act as the tab bar, the active one growing while the rest recede.
Live preview Tabs
Tide Inset Line Tabs
No lift and no shadow: the active tab is pressed in by an inner line, with a level gauge.
Live preview Tabs
Turbine File Format Tabs
Export format tabs with a blade that spins up on the format you select.
Live preview Tabs
Valley Scrolling Tab Bar
Six chips in a horizontally scrollable strip, with a fade hinting at the ones off screen.
Live preview Tabs
Valve Delivery Tabs
Delivery options whose valve handle turns a quarter and opens the green line.
Live preview Tabs
Vault Deco Tabs
Gilded art deco plates tilted back in perspective; the chosen one stands upright.