Developer Tools New Tool

Free Online CSS Timeline Generator with a Mobile Fallback

Build a vertical CSS timeline and watch it as you work. Set the line on the left or centred with alternating entries, the dot size and colour, the gap between entries, the card and the date label. A compact horizontal variant is included, and the output collapses to one column on a phone.

Free Forever Nothing Uploaded Vertical and horizontal Runs in your browser

Free Online CSS Timeline Generator with a Mobile Fallback

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Timeline Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

March 2024

First release

The first public version shipped with three modules and no account system at all.

September 2024

Rewritten layout

The page shell moved to a shared template, which cut the duplicated markup in half.

June 2025

Offline by default

Every tool now runs in the browser, so nothing is uploaded and the pages work with the network off.

Narrow the browser window to see the single column fallback the generated CSS includes.

CSS

Layout Shape Gap between entries px Collapse below px

Line and dot Line px Dot px Dot ring px Dot shape

Entry card Padding by px Card Text Radius 10px Card border

Date label Size px Style Class name

The single column media query is part of the output, whichever layout you choose.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a Timeline with CSS

A few steps, and nothing is uploaded.

Pick the shape A vertical timeline with the line down the left, a centred one with entries alternating either side, or a compact horizontal row. Set the gap between entries and the width at which the layout collapses.

Set the line and the dot The line is a pseudo-element rather than a border, so it can run the full height independently of the entries. The dot takes a size, a colour, a ring that separates it from the line, and a circle, square or diamond shape.

Style the card and the date Padding, background, text colour, radius and an optional border for the entry card. The date label can be upper case with letter spacing, which is the usual treatment, or left exactly as written.

Copy the whole set The output holds the wrapper, the line, the entry, the dot, the card and the date, followed by the media query that puts everything in one column, with the expected HTML as a comment.

What to Know About CSS Timelines

Including why the alternating layout has to collapse on a phone.

The alternating layout has to collapse to a single column on a phone. A centred timeline works because each entry has roughly half the width to itself, and at 400 pixels half the width is not enough for a sentence. Worse, the eye has to zigzag across the line to follow the order, which is tiring on a narrow screen and impossible once the cards start wrapping to three words a line. Every rule set this page writes ends with a media query that moves the line to the left, puts every entry on the same side and gives each card the full width. You can change the breakpoint, but the query is always written, because leaving it as an exercise for the reader is how most timeline snippets on the web end up broken on a phone.

The line is a pseudo-element, not a border on the entries. A border on each entry stops and restarts at every gap, so the line looks dashed as soon as there is any spacing. Drawing it as an ::before on the wrapper, positioned absolutely and stretched from top to bottom, gives one continuous line whatever the gap is. The trade off is that the wrapper needs position: relative and the entries need enough padding to clear the line, which is why the padding and the line position are calculated together in the output.

A timeline is a list, so mark it up as one. Visually it is a line with dots, but to a screen reader it is a sequence of dated events, and an ordered list of items carries that meaning at no cost. The generated CSS is written against a wrapper with entry children and works just as well on ol and li as on divs, so use the list and add list-style: none. Dates are worth putting in a time element with a datetime attribute as well.

This page writes CSS only and does not manage your content. There is no way to enter your own entries, add or remove them, or export the HTML with your text in it: the preview always shows the same three sample entries, and you copy the rules into your own markup. It also does not read an existing stylesheet back into the controls, has no scroll animation, no icons inside the dots and no branching or nested timelines.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Three layouts Line left, centred and alternating, or a compact horizontal row.

A real timeline Three working entries with the generated rules applied live.

Dots you shape Circle, square or diamond, with a ring to lift it off the line.

Mobile query included One column below your breakpoint, written into the output.

CSS plus the markup The full rule set, with the HTML it expects as a comment.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Timeline Generator

A timeline is a line, a row of dots and a card per entry, and every part of it can be done in CSS with no images and no JavaScript. The awkward bits are the arithmetic. The line has to be positioned so the dots sit exactly on it, the entry padding has to clear both, and the centred variant needs a different set of offsets for the odd and even entries, which is where most hand written attempts drift by a pixel or two and never quite look right.

This page does that arithmetic from the numbers you set. The line width, the dot size and the dot ring together decide where the line goes and how much padding each entry needs, so the dots stay centred on the line whatever size you choose. The preview is three real entries with the generated stylesheet applied to them, so what you see is the browser running your rules rather than a drawing of the result.

The part worth insisting on is the narrow screen. A centred alternating timeline is a good desktop layout and a poor phone one, so the output always ends with a media query that collapses it to a single left aligned column. The breakpoint is yours to choose. What the tool will not do is hand you the desktop half and let you discover the problem later on a phone.

Frequently Asked Questions

Layout, the line, semantics and narrow screens.

Because it is drawn as a border on each entry rather than on the wrapper, so it stops wherever the margin between entries begins. Draw it once as an absolutely positioned ::before on the wrapper, stretched from top to bottom, and the gap no longer matters. That is what the generated CSS does, which is why the wrapper needs position: relative.

Around 768 pixels is the usual choice and is the default here, because below that a centred timeline leaves each card less than 350 pixels. If your cards hold long headings or images, collapse earlier rather than later. Test by narrowing the browser window rather than by trusting the number, since the right point depends on how much text each entry carries.

Not from this tool. The dot is a pseudo-element with a background colour, which keeps the markup clean but leaves nowhere to put content. If you need an icon or a step number in the dot, replace the pseudo-element with a real element inside each entry, position it the same way, and move the size, colour and ring rules onto it. The rest of the generated CSS is unaffected.

Yes, where the entries genuinely have an order, which for a timeline they do. An ol with one li per entry tells a screen reader how many events there are and which comes first, and it costs you one list-style: none. The generated rules use a wrapper class and a child class, so they apply to list markup without any changes.

It needs to, and the output sets overflow-x: auto on the wrapper so it can. A horizontal timeline with more than about four entries will always be wider than a phone, and sideways scrolling is a reasonable answer as long as it is the wrapper that scrolls and not the page. Below your breakpoint the horizontal variant collapses to the same single column as the others.