Live preview Tabs
Savanna Divided Tabs
Hairline dividers separate the tabs and quietly step aside around the active one.
#layout CSS effects
48 free, pure-CSS effects match the "layout" tag. Each is copy-ready and needs no library or build step.
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 Timelines
Granite Branch Timeline
A granite commit trunk sprouts one side branch that curves out to its own node.
Live preview Tabs
Flint Sideline Tabs
A left hand rail marks the active row and the whole label steps inward.
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
Shaft Bottom Bar Tabs
The tab strip sits under the panel and a shaft pin rises into whichever is open.
Live preview Timelines
Marble Metro Timeline
A thick marble line threads three station rings the way a subway route map does.
Live preview Avatars
Spiral Padding Ring Avatar
The gap around the portrait is pure padding, so hovering can widen the whole ring.
Live preview Sliders
Thicket Header Slider
A tidy header line pins the field name left and its live value chip hard right.
Live preview Tabs
Anvil Status Filter Tabs
Status filters with a heavy two pixel frame and no shadow, struck flat.
Live preview Tabs
Bearing Difficulty Tabs
Difficulty tabs counted in bearing balls that seat themselves when chosen.
Live preview Tabs
Canyon Month Tabs
Calendar month tabs painted in canyon strata, each opening its own week strip.
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
Conduit Sort Direction Tabs
Two tabs flip one shared list end over end instead of swapping panels.
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
Girder Report Type Tabs
Report tabs sitting on a truss whose zigzag shifts under the active span.
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
Lever Tilt Tabs
The chosen tab tips over its pivot and the panel swings in from the same hinge.
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
Piston Time Range Tabs
Time range tabs whose piston head plunges down into the selected window.
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
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
Valley Scrolling Tab Bar
Six chips in a horizontally scrollable strip, with a fade hinting at the ones off screen.
Live preview Tables
Basalt Airy Rows
Generous vertical rhythm gives three roomy rows plenty of breathing space.
Live preview Tables
Dune Detached Header
The header floats as its own card above the body block with a real gap between them.
Live preview Tables
Garnet Column Stripes
Shading runs vertically instead of horizontally so every other column is tinted.
Live preview Tables
Zenith Screen Ratios
Each resolution row draws its own aspect ratio as a scaled outline so shapes compare at a glance.
Live preview Timelines
Brass Zigzag Timeline
Cards alternate left and right of a brass rail, each pinned to it by a small stud.
Live preview Timelines
Coral Mirror Timeline
The coral rail sits on the right edge so the whole sequence reads right to left.
Live preview Timelines
Flux Funding Timeline
Soft moulded grooves carry a bead further along the track with every funding round.
Live preview Timelines
Forge Shift Board
Three crews claim their slots on a twenty four hour track and the night one wraps around.
Live preview Timelines
Garnet Split Timeline
Dates sit left of the garnet rail and the matching notes line up on the right.
Live preview Timelines
Gasket Quality Gates
Each checkpoint drops a needle onto its tolerance band and one lands outside the green.
Live preview Timelines
Girder Scale Timeline
An I beam doubles as a ruler where minor notches run behind three labelled marks.
Live preview Timelines
Gleam Tally Timeline
Volunteer hours counted in hand drawn tally marks, the newest month still catching light.
Live preview Timelines
Jade Roadmap Timeline
Three jade chevrons interlock into a roadmap strip labelled by quarter.
Live preview Timelines
Monsoon Curved Timeline
Two wide elliptical arcs sweep between the nodes instead of a straight rail.
Live preview Timelines
Obsidian Duration Timeline
Every obsidian entry carries a violet bar whose offset and width show when it ran.
Live preview Timelines
Orbit Sprint Cycle
Four sprint ceremonies sit around a dashed ring while a bead keeps orbiting them.
Live preview Timelines
Prairie Stair Timeline
Cards step down and to the right, joined by small rounded elbow connectors.
Live preview Timelines
Pylon Floor Indicator
A lit car rides its shaft and stops beside each floor listed on the right.
Live preview Timelines
Slate Horizon Timeline
A horizontal slate line with three stops whose captions alternate above and below.
Live preview Timelines
Socket Energy Ledger
Hourly draw is spelled out in segmented meter cells that fill further at peak.
Live preview Timelines
Thicket Two Column Timeline
Two crews report on either side of a shared rail with the day marked in between.
Live preview Timelines
Verge Lineage Timeline
Each generation doubles the row of small figures hanging off one descending family line.