Collection of free HTML and CSS timeline code examples (responsive, simple, vertical, horizontal, etc) from CodePen, GitHub, and other resources. Update of February 2021 collection. Thirteen new items.
Table of Contents
Related Articles
Vertical Timelines
Links
Made with
- HTML / CSS
About a code
UL Timeline Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Colorful Mario Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
TimeLine
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Timeline with Curves
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Timeline UI Design
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Responsive Grid Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Timeline
A simple way to customize an unordered list using pseudo-elements. The list decoration can be anything - even an image.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Super Simple Timeline
Super simple vertical timeline code for creating a vertical timeline.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Vertical Timeline - Notifications
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
UIkit 3 CSS Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: uikit.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Vertical Dark Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Timeline of HTML
Take an ordered list and make it a responsive timeline.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Timeline Multi
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: lineicons.css, animate.css
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: lineicons.css, animate.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Timeline
Timeline custom counter with gradient border.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Responsive Timeline Concept
A small timeline concept for customer's life cycle or a particular contract's life cycle.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css
Links
Made with
- HTML / CSS
About the code
Timeline CSS
Simple dashed timeline CSS.
Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript/Babel (jquery.js)
About the code
Scroll Timeline
Vertical scroll timeline.
Links
Made with
- HTML / CSS (Less)
About the code
CSS Timeline
CSS timelines with "Saira" and "Chivo" fonts.
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
CSS Vertical Timeline
Vertical timeline going from left to right. Fully responsive. Using Bootstrap.
Links
Made with
- HTML
- CSS
About the code
CSS Timeline
CSS timeline with custom properties.
Links
Made with
- HTML / CSS (SCSS)
About the code
Simple Responsive Timeline
Simple responsive vertical timeline layout in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript (swiper.js)
About the code
Responsive Slider Timeline
A responsive slider timeline made with Swiper JS library.
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Timeline Created with CSS Grid
Responsive timeline created with CSS grid. Browsers that do not support CSS grid will get the mobile version of the timeline.
Advanced Timeline
Advanced timeline: HTML / CSS / JavaScript
Made by MO7AMED
June 6, 2017
Timeline With Fixed Header Using Flexbox
HTML and CSS timeline with fixed header using flexbox.
Made by Matys
May 29, 2017
Links
Made with
- HTML / CSS
About a code
CSS Timeline With 3D Effect
CSS gradient timeline with 3D effect when you hover div.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Project Timeline
Project timeline in HTML and CSS.
Made by Russell Bishop
February 19, 2017
Timeline
HTML, CSS and JavaScript timeline.
Made by Mert Nerukuc
February 6, 2017
Hyperloop Timeline
Hyperloop timeline with HTML and CSS.
Made by Jakub Bačo
January 29, 2017
Vertical Timeline
CSS vertical timeline with time intervals.
Made by Andres
January 25, 2017
Links
Made with
- HTML / CSS (SCSS)
About a code
Flexbox Timeline Layout
Column-based flexbox timeline layout. The goal is to have clean, semantic HTML while creating a (somewhat complex) timeline-looking layout.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Single Div Timeline
Single div timeline in HTML and CSS.
Made by Niels Voogt
December 28, 2016
CSS Timeline
HTML and CSS timeline.
Made by Rafael Youakeem
December 26, 2016
Vertical Timeline
HTML and CSS timeline.
Made by Atticus Koya
December 22, 2016
Timeline
CSS timeline example with vertical and horizontal lines created with pseudo-elements.
Made by Nomisoft
December 7, 2016
Comments & Feeadbacks & History Timeline
Double side comment timeline tweenmax.
Made by Hosam Elnabawy
November 28, 2016
UI Design Morning Timeline
Morning timeline with HTML and CSS.
Made by Hưng Nguyễn
September 17, 2016
Timeline
Timeline with HTML and CSS.
Made by Kelsey Santangelo
November 14, 2016
Timeline UI
CSS implementation of dribble sketch for training purposes original design.
Made by Simon Reinsperger
September 13, 2016
Simple Responsive Timeline
Simple responsive timeline in HTML and CSS.
Made by Brady Wright
September 8, 2016
Vertical Timeline
Vertical timeline with HTML, CSS and JavaScript.
Made by Sava Lazic
September 4, 2016
Responsive Timeline
Responsive Timeline with HTML, CSS and JavaScript.
Made by Arnaud Balland
August 25, 2016
Vertical Timeline
Timeline with HTML and CSS.
Made by Yago Gonzalez
August 23, 2016
Pretty Timeline
HTML and CSS pretty timeline.
Made by Evan Wieland
July 14, 2016
CSS Timeline
CSS timeline with HTML and CSS.
Made by Tristan White
July 10, 2016
Timeline
Timeline with HTML, CSS and JavaScript.
Made by radhika prajapati
July 6, 2016
Vertical Timeline With CSS
Building a vertical timeline with CSS and a touch of JavaScript.
Made by Envato Tuts+
May 24, 2016
Timeline
Timeline for a personal project with HTML and CSS.
Made by Bruno Rodrigues
April 3, 2016
Collapsable Timeline
Collapsable timeline with HTML, CSS and JavaScript.
Made by Barney Parker
November 26, 2015
CSS3 Timeline
Fully responsive mobile first CSS timeline.
Made by Krishna Babu
November 24, 2015
Animated SVG Travel Timeline
Animated travel timeline with HTML, CSS and SVG.
Made by Vince Brown
July 29, 2015
Vertical Timeline
Pure CSS vertical timeline.
Made by Darcy Voutt
March 11, 2015
Timeline Animation
Just messing around with a simple animated timeline.
Made by Chris Wright
February 12, 2015
Narrow Vertical Timeline
Making a narrow version of the timeline plugin to fit on a mobile screen.
Made by Tyler Berry
February 3, 2015
Timeline For A Portfolio
A timeline inspired by http://kohlhofer.com/, built for a portfolio page.
Made by Andrew R McHugh
February 1, 2015
Responsive Vertical Timeline
HTML and CSS responsive vertical timeline.
Made by Ratko Solaja
September 26, 2014
Links
Made with
- HTML / CSS
About a code
Responsive Vertical Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Vertical Timeline
An easy to customize, responsive timeline. Used some CSS3 tricks and a bit of jQuery to create some bounce animations that affect desktop users only, while on mobile the structure is more minimal.
Made by CodyHouse
June 12, 2014
Timeline Scribble
HTML and CSS timeline scribble.
Made by Michaela
April 20, 2014
Vertical Timeline
HTML and CSS timeline.
Made by Ross McNeil
January 7, 2014
CSS Timeline
Fully responsive CSS timeline.
Made by Nils Wittler
September 19, 2013
CSS3 Timeline
Please set the $vertical variable to false to see the horizontal version.
Made by Peiwen Lu
May 19, 2013
Horizontal Timelines
Links
Made with
- HTML / CSS / JS
About a code
Super Mario Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: flickity.css, flickity.js
Links
Made with
- HTML / CSS
About a code
Life on Earth Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Starwars Timeline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Timelines
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Resize Timelapse
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS/Sass
- JavaScript (jquery.js)
About the code
Responsive Timeline v3
A timeline on desktop that switches to clickable circles on mobile. Content changes as you click the circles.
Links
Made with
- HTML
- CSS/Sass
- JavaScript/TypeScript (jquery.js)
About the code
Nested And Color Timeline
Nested & color coded interactive timeline.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js, slick.js)
About the code
Responsive History Timeline
Horizontal responsive history timeline.
Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript (jquery.js, slick.js)
About the code
Group Timeline
Horizontal group timeline.
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
CSS Only Order Process Steps
Just a nice process bar here where you can click on the different steps and be presented with information. The box at the top will also animate depending on the steps.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Horizontal Timeline
Horizontal timeline with CSS and JavaScript.
Made by Envato Tuts+
April 27, 2017
Horizontal Timeline
HTML and CSS timeline with slick.js slider.
Made by cenda
April 10, 2017
4 Panel Timeline CSS
CSS only timeline for a client. Mobile styles coming soon.
Made by Jeff Glenn
December 22, 2016
Timeline Sequence V1
Timeline with HTML, CSS and JavaScript.
Made by Youssef
June 8, 2016
Horizontal Timeline Mockup
Horizontal timeline with HTML, CSS and JavaScript.
Made by Xin YAO
February 18, 2016
HR Timeline
HTML and CSS timeline.
Made by Youri
February 17, 2016
Horizontal Timeline Inspired By Codyhouse
This is a horizontal timeline that will be used with a dynamic set of no more than maybe 5 dates.
Made by Adam Kimmerer
February 9, 2016
Horizontal Timeline
Horizontal timeline with HTML, CSS and JavaScript.
Made by Ritesh Kumar
December 24, 2015
Horizontal Timeline
Horizontal timeline with HTML, CSS and JavaScript.
Made by Alberto
July 6, 2015
Timeline
Simple timeline abstraction with HTML and CSS.
Made by Abhi Sharma
December 23, 2014
Animated Circle Timeline
Timeline with animated items that appear on hover of the corresponding time slot.
Made by Jen Huang
December 11, 2014
Horizontal Timeline
HTML, CSS and JavaScript horizontal timeline.
Made by Elton Mesquita
August 29, 2014
Horizontal Timeline
Timeline with HTML and CSS.
Made by Clint Brown
September 30, 2013
CSS3 Horizontal Timeline
HTML and CSS3 horizontal timeline.
Made by Peiwen Lu
May 17, 2013