Every timeline on this page was designed and coded in-house by uiCookies — our own pack, not a roundup of CodePen embeds. Each design is a single self-contained HTML file with the CSS inlined; none of them require JavaScript, and there are no libraries or build tools involved.
The ten designs split six vertical and four horizontal: classic alternating timelines, minimal changelogs, dark roadmaps with status states, activity feeds, progress steps, scroll-snap history tracks, quarter roadmaps, milestone cards, a gradient-glow story timeline, and a CV experience layout. Every horizontal design collapses into a vertical layout on small screens.
Download all 10 (free) Browse live demos
The designs
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. 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.
6. 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.
7. 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.
8. Horizontal Milestone Cards
Numbered circles on a connector line with equal-height cards beneath — the “how it works” section every landing page eventually needs.
9. 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.
10. 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.
Using the timelines
Copy a design’s markup and the CSS block at the top of its file into your page — each timeline is a self-contained block that inherits only the font stack. Items are plain repeating elements, so generating them from a loop in PHP, React, or a template engine is a straight substitution. Full notes ship in the pack download.
Frequently asked questions
Are these CSS timelines free?
Yes. The whole pack downloads free from the uiCookies pack page — no signup, no email gate. See the uiCookies license page for attribution details.
Do the timelines need JavaScript?
No. All ten designs are pure HTML and CSS — including the horizontal scroll-snap history, which uses native CSS scroll snapping rather than a slider script.
How do the timelines behave on mobile?
The vertical designs collapse to a single left-aligned column, and every horizontal design rotates into a vertical layout below its breakpoint — no horizontal scrolling on phones except the deliberately scrollable history track.
Is there a horizontal timeline included?
Yes, four: checkout-style progress steps, a scroll-snap history track, a quarters roadmap, and numbered milestone cards. They also have a dedicated write-up on our horizontal timeline page.
Looking specifically for sideways layouts? See the dedicated horizontal timeline templates page, or pair these with our card templates.
I Iove these designs! Kudos to the designers!
some nice timeline / milestone effect above, THANKS