Live preview Tabs
Brass Pill Tabs
A polished brass pill slides behind the labels while the panels cross fade.
#transition CSS effects
38 free, pure-CSS effects match the "transition" tag. Each is copy-ready and needs no library or build step.
Live preview Accordions
Brass Ledger Accordion
Numbered ledger rows where the brass index chip fills as the note unrolls.
Live preview Accordions
Caliper Guide Accordion
Step numbers come from a CSS counter, so no digit is written into the markup.
Live preview Accordions
Cascade Pill Accordion
Fully rounded pill rows relax into soft rectangles as their body appears.
Live preview Accordions
Copper Rule Accordion
No shadows at all: a hairline rule draws itself in copper when a row opens.
Live preview Accordions
Fjord Slide Accordion
Panels open sideways: the body widens from the left header out to the right.
Live preview Accordions
Granite Counter Accordion
Every row carries a count badge and only one section stays open at a time.
Live preview Accordions
Lapis Drawer Accordion
Each row looks like a drawer with a grip handle and its contents slide out.
Live preview Accordions
Opal Strip Accordion
A horizontal ribbon where the chosen column widens and its text fades in.
Live preview Accordions
Quartz Clip Accordion
The panel is wiped open from the left edge with an animated clip path.
Live preview Accordions
Slate Stack Accordion
A radio group keeps one slab open and the body grows with grid template rows.
Live preview Accordions
Spindle Specs Accordion
Exclusive rows open a two column specification sheet that grows from zero height.
Live preview Accordions
Summit Thick Accordion
The open section thickens its outline while the padding shrinks to absorb it.
Live preview Accordions
Topaz Progress Accordion
A thin progress line under each header runs to full width as the row opens.
Live preview Modals
Hush Archive Modal
A blueprint archive confirmation fades in quietly while its measure lines extend outward from the centre.
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
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
Dash Sketch Tabs
Hand drawn boxes on a notebook where a pencil dash is redrawn under the active tab.
Live preview Tabs
Flux Holographic Tabs
An iridescent foil surface whose rainbow sheen keeps travelling over the chosen tab.
Live preview Tabs
Girder Report Type Tabs
Report tabs sitting on a truss whose zigzag shifts under the active span.
Live preview Tabs
Glide Glass Tabs
A frosted glass pane stretches as it glides between the labels of the bar.
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
Ivory Progress Tabs
An ivory progress line under the panel grows as later tabs are selected.
Live preview Tabs
Onyx Folder Tabs
Browser style folder tabs whose active sheet merges into the panel below.
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
Ripple Minimal Tabs
Hairline Japanese layout with wide breathing room where the labels answer in a wave.
Live preview Tabs
Valve Delivery Tabs
Delivery options whose valve handle turns a quarter and opens the green line.
Live preview Tabs
Wander Bauhaus Tabs
Primary shapes on a striped ground; the ground itself shifts instead of an indicator.
Live preview Tables
Arc Fixture Reveal
Hovering a fixture arcs open a second line under the tie that lists the goal scorers.
Live preview Timelines
Basalt Checked Timeline
Finished basalt steps fill in with a tick while the connector to the last one stays dashed.
Live preview Timelines
Chalk Minimal Timeline
A rail free chalk list marks each moment with a short tick that stretches on hover.
Live preview Timelines
Echo Recall Timeline
Memories recede into the distance, shrinking and fading until a hover brings one back.
Live preview Timelines
Ivory Clock Feed
An ivory activity feed stamps each row with a monospace clock chip and slides on hover.
Live preview Timelines
Tide Expanding Strip
Three tide phases share one strip and the hovered phase widens to show its reading.
Live preview Timelines
Zinc Expanding Timeline
Hovering a zinc row unfolds a hidden detail line and swells its marker at once.