Live preview Timelines
Conduit Deploy Stages
Junction boxes sit on a twin conduit run and the stage in flight marches its stripes.
Timelines — 100 CSS effects
Vertical and horizontal timelines, milestones, and step markers.
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 Timelines
Cusp Roadmap Timeline
Quarters read as folded paper bands, each creased down the middle with a lifted corner.
Live preview Timelines
Granite Branch Timeline
A granite commit trunk sprouts one side branch that curves out to its own node.
Live preview Timelines
Piston Pump Pipeline
Three bores drive the extract, transform and load stages with offset piston strokes.
Live preview Timelines
Sway Album Timeline
Three dated prints hang from a twisted cord and swing gently out of step with each other.
Live preview Timelines
Dash Career Timeline
Sprint seasons stack as track lanes and the newest runner leans further down the straight.
Live preview Timelines
Drift Eras Timeline
Blunt outlined blocks hold each century over an oversized ghost numeral and shift on hover.
Live preview Timelines
Flange Merge Timeline
A side branch flanges out of the trunk and curves straight back into the next release.
Live preview Timelines
Hush Lifeline Timeline
Life events written in a quiet hand, each pinned by a slightly uneven ink ring on the margin.
Live preview Timelines
Lagoon Thumbnail Timeline
Every entry carries a small gradient frame whose light drifts on its own beat.
Live preview Timelines
Lull Retro Timeline
Taped paper notes from three quiet weeks lean at odd angles and straighten under the cursor.
Live preview Timelines
Marble Metro Timeline
A thick marble line threads three station rings the way a subway route map does.
Live preview Timelines
Mica Growing Timeline
The mica rail redraws itself downward on a loop and each dot pops in behind it.
Live preview Timelines
Reef Habit Week
A week of habit dots per row, with today's column ringed and pulsing.
Live preview Timelines
Spindle Reading Series
Three spindle speed samples grow into columns above a dashed limit line.
Live preview Timelines
Wander Stamp Timeline
A travel journal where every stop carries a perforated postage stamp that tilts on hover.
Live preview Timelines
Amber Pulse Timeline
The step in progress throbs with an expanding amber halo while the rest stay dim.
Live preview Timelines
Anvil Event Log
Timestamped machine lines carry their own level chip and the error row keeps a caret blinking.
Live preview Timelines
Arc Filmstrip Timeline
A sprocketed strip of film carries three chapters of a story arc and lifts the hovered frame.
Live preview Timelines
Aurora Parcel Tracker
Three parcel checkpoints share one horizontal rail and the live leg keeps flowing.
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
Bearing Fault History
Each fault entry carries a split race ring and the open one turns the whole row red.
Live preview Timelines
Bloom Seasons Timeline
A conic wheel splits the year into four seasons while a slow hand sweeps around it.
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
Caliper Calibration Log
Calibration entries pin the measured value between two caliper jaws with the drift beside.
Live preview Timelines
Canyon Checkout Steps
Cart to payment to confirmation, where a cleared step swaps its digit for a tick.
Live preview Timelines
Cascade Contract Stages
Signed contract stages get a tilted double ring stamp, the open 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
Chassis Order Stages
Every production stage sits inside a bracketed frame that lights up when hovered.
Live preview Timelines
Circuit Trace Timeline
Square pads hang off a board trace and a bright signal keeps travelling down it.
Live preview Timelines
Cobalt Arrow Timeline
Cobalt chevrons point from one stage down to the next in place of a solid rail.
Live preview Timelines
Coil Reading Shelf
A reading list drawn as book spines where the read part of each title fills from below.
Live preview Timelines
Copper Badge Timeline
Every entry hangs off a copper pill badge that carries its month right on the rail.
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
Cove Ledger Timeline
Money in and out over three dates, each row flagged by a small direction arrow.
Live preview Timelines
Delta Hiring Pipeline
Hexagonal stage badges carry the funnel from applied down to a single offer.
Live preview Timelines
Dune Upload Stages
Upload stages carry their own percentage and the busy bar marches with stripes.
Live preview Timelines
Dynamo Backup History
Snapshot cylinders chain downward with dashed links and the full run leads the set.
Live preview Timelines
Echo Recall Timeline
Memories recede into the distance, shrinking and fading until a hover brings one back.
Live preview Timelines
Ember Now Divider
Past entries sit dimmed above a glowing now divider while what is next stays lit.
Live preview Timelines
Fjord Release History
Version tags with a notched left edge hang under every release headline.
Live preview Timelines
Flint Milestone Timeline
Two plain flint stops flank one milestone marked by a glowing rotated diamond.
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
Frost Rail Timeline
A frosted vertical rail whose light drifts downward past three glowing event dots.
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
Gear Chain Timeline
Toothed wheels turn in opposite directions and a bead chain links each stage.
Live preview Timelines
Girder Scale Timeline
An I beam doubles as a ruler where minor notches run behind three labelled marks.
Live preview Timelines
Glacier Chat Thread
Timestamped bubbles land one after another and the reply leans to the far side.
Live preview Timelines
Gleam Tally Timeline
Volunteer hours counted in hand drawn tally marks, the newest month still catching light.
Live preview Timelines
Glide Daylight Timeline
A sky band runs from dawn to night while a warm sun disc glides and dips across it.
Live preview Timelines
Halo Charter Timeline
Frosted glass milestones expand on click and the open one gains a soft blue halo.
Live preview Timelines
Harbor Social Feed
A thread line links round gradient avatars down an activity feed with ages on the right.
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
Jade Roadmap Timeline
Three jade chevrons interlock into a roadmap strip labelled by quarter.
Live preview Timelines
Kiln Meter Readings
Monthly meter readings sit in digit cells and the newest one keeps rolling over.
Live preview Timelines
Kindle Streak Timeline
A habit streak drawn as interlocking chain links where the newest one keeps flickering warm.
Live preview Timelines
Lapis Card Timeline
Each lapis entry opens into a compact card carrying a heading and a status chip.
Live preview Timelines
Lattice Stack Timeline
Build layers pile up as sheared plates that widen as the assembly goes down.
Live preview Timelines
Lever Time Card
A punched card lists the week where each row stamps its own in and out arrows.
Live preview Timelines
Meadow Episode List
Podcast episodes stack in order and the one playing swaps its arrow for an equaliser.
Live preview Timelines
Mesa Year Bands
Year chips break the rail into bands so a long history stays readable.
Live preview Timelines
Monsoon Curved Timeline
Two wide elliptical arcs sweep between the nodes instead of a straight rail.
Live preview Timelines
Oasis Journey Route
Departure, transfer and arrival sit on a dotted route with a marker sliding across.
Live preview Timelines
Obsidian Duration Timeline
Every obsidian entry carries a violet bar whose offset and width show when it ran.
Live preview Timelines
Onyx Ring Timeline
Hollow onyx rings mark every step and the running one spins a dashed halo.
Live preview Timelines
Opal Progress Timeline
An opal fill climbs the rail on load and halts at the step still under way.
Live preview Timelines
Orbit Sprint Cycle
Four sprint ceremonies sit around a dashed ring while a bead keeps orbiting them.
Live preview Timelines
Pearl Icon Timeline
Three pearl markers change shape along one rail: disc, diamond and arrow head.
Live preview Timelines
Prairie Stair Timeline
Cards step down and to the right, joined by small rounded elbow connectors.
Live preview Timelines
Pulse Vows Timeline
A clipped heartbeat silhouette beats above three milestones of one relationship.
Live preview Timelines
Pylon Floor Indicator
A lit car rides its shaft and stops beside each floor listed on the right.
Live preview Timelines
Quartz Dashed Timeline
The dashed quartz rail slides downward between three rotated checkpoint squares.
Live preview Timelines
Quiver Level Timeline
Chunky pixel blocks track a learning path and the level in progress jitters one pixel at a time.
Live preview Timelines
Ratchet Line Steps
A pawl jumps from station to station along a toothed rail and never slides back.
Live preview Timelines
Ridge Day Agenda
An hour column runs down the left while the current slot keeps breathing.
Live preview Timelines
Ripple Pledge Timeline
Each funding tier sends a thin arc rippling outward from the left edge of the row.
Live preview Timelines
Rivet Assembly Steps
Numbered part codes hang off a rail whose domed rivet heads turn under the cursor.
Live preview Timelines
Ruby Numbered Timeline
Numbered ruby discs count the steps using a pure CSS counter, no markup digits.
Live preview Timelines
Savanna Gap Timeline
The space between two nodes grows with the wait, and the gap itself is labelled.
Live preview Timelines
Shaft Conveyor Stops
A belt keeps running over its rollers while three gate posts mark the packing stops.
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
Spiral Vinyl Timeline
Three grooved records sit in a rack and the selected one spins while its year stays upright.
Live preview Timelines
Summit Recipe Steps
Recipe stages hang off a beaded rail and each one states its own cooking time.
Live preview Timelines
Tether Robot Cycle
A two segment arm walks through reach, grip and place before starting the cycle again.
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
Tide Expanding Strip
Three tide phases share one strip and the hovered phase widens to show its reading.
Live preview Timelines
Topaz Gradient Timeline
A topaz to violet gradient runs down the rail and every dot borrows its local hue.
Live preview Timelines
Tundra Syllabus Steps
Course units read done, in progress and locked through three different markers.
Live preview Timelines
Turbine Service Windows
Running hours split into hatched service windows and the due one keeps drifting.
Live preview Timelines
Valley Service Log
A maintenance ledger with banded rows, odometer readings and one job still due.
Live preview Timelines
Valve Stop Timeline
A standpipe carries flowing fluid past three handwheels and the last one is shut.
Live preview Timelines
Vault Diploma Timeline
Certificates line up behind embossed wax seals and the one still pending loses its colour.
Live preview Timelines
Verge Lineage Timeline
Each generation doubles the row of small figures hanging off one descending family line.