Twenty-two timeline designs — twelve vertical and ten horizontal — all designed and coded in-house by uiCookies. Each is a single self-contained HTML file with the CSS inline, and not one of them uses JavaScript.
The set covers what timelines are actually used for rather than one shape restyled twelve times: company histories, changelogs, roadmaps, delivery tracking, discussion threads, CVs, audit logs and a Gantt chart.
Download all 22 (free) Browse live demos
Vertical timelines
The default shape, and the one that suits a phone without modification.
1. Classic Vertical Timeline
The pattern most people mean by “CSS timeline”: a center line with cards alternating left and right, connected by dots. Collapses to a single left-aligned column on mobile.
2. Minimal Release-Notes Timeline
A hairline, small dots, and type — nothing else. Made for changelogs and activity logs where the content should carry the page.
3. Dark Roadmap Timeline
A status timeline with three visual states — shipped, in progress, and planned — on a dark theme with a progress-colored spine. Reads instantly as a product roadmap.
4. Activity Feed Timeline
The app-style feed: avatars on the line, verbs and objects in the copy, quoted attachments, and relative timestamps. Drop it into any dashboard sidebar.
5. Gradient Glow Timeline
A vertical gradient spine where every marker glows in its own accent color. A modern look for launch stories and portfolio case studies.
6. Resume / CV Timeline
A two-column experience timeline — dates and places on the left, roles and skills on the right — styled like a printed CV.
7. Grouped Changelog Timeline
Entries collected under sticky month headings, the shape a changelog actually takes. The headings stick while their group scrolls, so you never lose track of which month you are reading — one line of CSS, no observer.
8. Scroll-Filled Spine
A vertical timeline whose spine fills as you scroll, using a scroll-driven animation — no scroll listener and no JavaScript at all where the browser supports it. Under reduced motion the spine renders full rather than freezing part-filled.
9. Delivery Tracking Timeline
The vertical status timeline a courier or a support ticket needs: completed steps with timestamps, a live current step that pulses, future steps greyed, and an exception branch for when a delivery fails — the state most tracking interfaces forget to design.
10. Discussion Thread Timeline
A conversation as a timeline — avatars on the spine, system events rendered lighter than human comments so the eye skips them, and a nested reply. The difference in visual weight is the whole design.
11. Alternating Icon Timeline
The centred alternating layout with icon nodes rather than plain dots, and cards that keep their pointer aimed at the spine. Below 760px it collapses to a single left-aligned column, because alternating layouts are unreadable on a phone.
12. Dense Audit Log Timeline
The high-density variant — one line per event, tabular timestamps and a coloured action chip, for a log where fifty rows have to stay scannable. Dense lists are their own design problem, and generous spacing is the wrong answer to it.
Horizontal timelines
Better for a fixed number of steps and for anything read as progress rather than history. If you only want these, there is a dedicated page for horizontal timeline templates.
13. Horizontal Progress Steps
Checkout-style steps with done, current, and upcoming states on a horizontal connector. Below 640px it rotates into a vertical stepper automatically.
14. Horizontal Scroll History
A sideways-scrolling company history with CSS scroll-snap — each era snaps into place as you scroll. No JavaScript, just overflow and snap points.
15. Horizontal Roadmap by Quarters
Quarter markers along a gradient line with cards alternating above and below it. The classic conference-slide roadmap, as responsive HTML.
16. Horizontal Milestone Cards
Numbered circles on a connector line with equal-height cards beneath — the “how it works” section every landing page eventually needs.
17. Gantt Chart Timeline
A Gantt view — task rows against a month axis. Every bar is placed by explicit grid row and column rather than by percentage maths, so adding a month is one value change, and the month gridlines are a repeating gradient rather than a screenful of empty cells.
18. Horizontal Media Timeline
A scroll-snapping track of image cards with years on the rail above — for a company history or a photo retrospective. The media areas are CSS gradients, so the file stays self-contained, and the scrollbar is styled rather than hidden.
19. Horizontal That Becomes Vertical
The technique every other horizontal timeline needs: one markup that runs horizontally on a wide screen and flips to vertical below 700px. The whole switch is a flex-direction change and two connector rules — no duplicated markup and no second component to keep in sync.
20. Horizontal Icon Process
An icon-led process strip with connector arrows between stages — for a how-it-works section rather than a progress indicator. The arrows are CSS borders, so there is nothing to align by hand and no images to ship.
21. Compact Inline Timeline
The small horizontal tracker that fits inside a card or a table row, in three variants: a segmented bar, a dot connector and a pill row. Each is a single flex row, so none of them needs a media query of its own.
22. Decade Axis Timeline
A dated axis where markers sit at true positions along the line rather than at even intervals — one percentage per event, so 1991 and 1993 stay close together the way they should. Labels alternate above and below to avoid collisions.
Building a timeline in CSS
Almost every timeline is the same three parts, and two of them go wrong in the same way each time.
The spine. One absolutely-positioned element on the container, not a border on each entry — a border per entry leaves a gap wherever the margin falls. The detail that separates a finished timeline from a rough one is trimming it: the line should start at the first dot and stop at the last, which means giving the final entry a fixed short spine rather than letting it run to the bottom of the container.
The nodes. Position them over the spine and give them the page background as their own, so the line appears to pass behind rather than through. A node that inherits transparent shows the spine straight through its middle.
The content. Give it padding on the spine side, never a margin — margins collapse between entries and the spacing drifts as soon as an entry has a heading.
Choosing vertical or horizontal
Vertical scales; horizontal does not. A vertical timeline can hold two entries or two hundred, and each can carry a paragraph. A horizontal one is fixed-width by nature — five steps read well, twenty are unreadable at any size.
Use horizontal when the count is small and known, and when the thing being shown is progress: a checkout, a delivery, a setup wizard. Use vertical for history, changelogs, conversations and anything where entries keep being added.
Using the timelines in your project
Download the pack, open the folder for the design you want, and copy its markup along with the rules from the <style> block. Each design is self-contained — nothing depends on the other 21 or on a shared stylesheet.
Frequently asked questions
Are these CSS timelines free?
Yes. All 22 are free for personal and commercial projects, including client work. No attribution required.
Do the timelines need JavaScript?
None of them. Every design in the pack is pure CSS, including the spine that fills as you scroll — that one uses a scroll-driven animation (animation-timeline) rather than a scroll listener, and renders complete where the browser does not support it.
How do the timelines behave on mobile?
The vertical ones already suit a narrow screen. The horizontal ones each declare what they do: the process strip and the step tracker rotate to a column, the media track and the decade axis scroll or restack, and design 13 exists specifically to show the flip from horizontal to vertical in one markup.
How do I make a vertical timeline in CSS?
A single absolutely-positioned spine on the container, then one dot per entry positioned over it. The part worth copying is the spine trimming: give the last entry a fixed short height so the line stops at the final dot instead of running past it into empty space.
Can I use these with Bootstrap, Tailwind or React?
Yes. Each design uses its own class names, so nothing collides with a framework you already load. For React or Vue, copy the markup into a component and move the CSS into a stylesheet or module — there is no JavaScript to port.
Can I use these in a template I sell?
Yes, in client work and in products you sell. What you cannot do is repackage the pack itself for redistribution.
Download all 22 timeline templates (free) Browse live demos
I Iove these designs! Kudos to the designers!
some nice timeline / milestone effect above, THANKS