EspañolTimeline / step-by-step generator (CSS)
Write each step on one line (title | text). Choose the template: numbered steps, a timeline with dates or side-by-side steps.
How to useSteps and history on a timeline
Available in: 
Timeline / step-by-step generator (CSS): what it is for
A how-it-works section with a few numbered steps answers in advance the questions of someone thinking about hiring you. The same structure works for telling the company's story on a timeline.
Write the steps and choose the template: vertical numbered steps, a timeline with markers and the titles as dates, or side-by-side steps that become a column on phones. The HTML uses an ordered list, and the numbers come from a CSS counter.
How to use
- Write the steps, one per line.
- Choose the template, title and color.
- Copy the code and paste it into the page.
When to use it
- How-it-works section for a service.
- Company history.
- Stages of an order or a project.
Frequently asked questions
When should I use step-by-step?
To explain how your service works in a few steps (order, production, delivery), which reduces questions before purchase. Three to five short steps work better than a long list.
Does the horizontal version work on phones?
Yes. Below 768 px the side-by-side steps turn into a column, with the line vertical, so they aren't squeezed.
Why an ordered list?
The steps sit in an ol element, so screen readers announce how many steps there are and the position of each. The visible numbers come from CSS, without duplicating the text.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.