37 CSS Timelines Examples
Collection of HTML and CSS Timeline templates examples. Hand-Picked from codepen.io.It’s free to use.
Note: The Collection is free.
Table of Content
Verticle Timelines
1. Responsive Vertical Timeline
Made with: HTML / CSS (SCSS)
Created by shimin, Created At January 1, 2016
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
2. Vertical Timeline
Made with: HTML / CSS
Created by Web Cifar, CreatedAt April 25, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
3. CSS Vertical Timeline
Made with: HTML / CSS (SCSS)
Created by Tristan White, CreatedAt May 27, 2016
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
4. CSS Vertical Timeline
Made with: HTML / CSS
Created by Tara Swenson, CreatedAt October 26, 2018
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
5. Vertical Timeline
Made with: HTML / CSS (SCSS)
Created by Shireen Taj, CreatedAt July 9, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
6. Timeline UI Design
Made with: HTML / CSS (SCSS)
Created by bberameric, CreatedAt November 2, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
7. CSS Vertical Timeline
Made with: HTML / CSS (Less) / JS
Created by Josh Holloran, CreatedAt August 30, 2012
Responsive : no
Dependencies : jQuery.js 2.1.3
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
8. Vertical Timeline
Made with: HTML / CSS (SCSS) / JS
Created by radhika prajapati, CreatedAt July 6, 2016
Responsive : no
Dependencies : jQuery.js 2.2.4
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
9. Vertical Timeline
Made with: HTML / CSS / JS
Created by MO7AMED EL DMRDASH, CreatedAt June 6, 2017
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
10. Simple Responsive Vertical Timeline
Made with: HTML / CSS (SCSS)
Created by Sam Jacobs, CreatedAt March 8, 2016
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
11. Responsive Vertical Timeline
Made with: HTML / CSS (SCSS) / JS
Created by Arnaud Balland, CreatedAt June 14, 2016
Responsive : yes
Dependencies : jQuery.js 2.2.4
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
12. Vertical Timeline
Made with: HTML (Pug) / CSS (SCSS)
Created by Vineeth.TR, CreatedAt November 6, 2014
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
13. Vertical Scroll Timeline
Made with: HTML (Pug) / CSS (SCSS) / JS (Babel)
Created by Viktor, CreatedAt February 18, 2018
Responsive : no
Dependencies : jQuery.js 3.2.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
14. Timeline Custom Counter with Gradient Border
Made with: HTML / CSS (SCSS) / JS
Created by Lauren Chilcote, CreatedAt October 27, 2018
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
15. Responsive Grid Timeline
Made with: HTML / CSS (SCSS)
Created by Shireen Taj, CreatedAt July 31, 2020
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
16. Vertical Dark Timeline
Made with: HTML / CSS (SCSS)
Created by Devcrud, CreatedAt March 29, 2020
Responsive : yes
Dependencies : font-awesome.css 5.3.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
17. Simple Responsive Vertical Timeline
Made with: HTML / CSS
Created by hassan kamal, CreatedAt March 30, 2016
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
18. Simple Timeline
Made with: HTML / CSS
Created by HTML Codex, CreatedAt June 26, 2020
Responsive : yes
Dependencies : font-awesome.css 5.10.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
19. Timeline
Made with: HTML / CSS (SCSS)
Created by No Mam, CreatedAt November 14, 2016
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
20. Timeline Scribble
Made with: HTML / CSS (SCSS)
Created by Michaela, CreatedAt April 20, 2014
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
21. Verticle Timeline
Made with: HTML / CSS (SCSS)
Created by Zed Dash PRO, CreatedAt October 29, 2016
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
22. Verticle Timeline
Made with: HTML / CSS (SCSS)
Created by Yago Gonzalez, CreatedAt August 19, 2016
Responsive : yes
Dependencies : font-awsome.js
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
23. CSS3 Timeline
Made with: HTML / CSS (Sass)
Created by Peiwen Lu, CreatedAt May 14, 2013
Responsive : yes
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
24. Simple Responsive Timeline
Made with: HTML / CSS (SCSS)
Created by Brady Wright, CreatedAt April 28, 2016
Responsive : yes
Dependencies : bootstrap.css 3.3.6
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Horizontal Timelines
1. Responsive Timeline
Made with: HTML / CSS (Sass) / JS
Created by Clay Larson, Created At January 28, 2018
Responsive : yes
Dependencies : jquery.js 3.2.1, Google Fonts
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
2. Responsive History Timeline
Made with: HTML / CSS (SCSS) / JS
Created by Dejan Babić, CreatedAt October 12, 2017
Responsive : no
Dependencies : font-awesome.css 4.5.0, slick.css 1.8.1, slick.js 1.8.1, jquery.js 3.2.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
3. Horizontal Timeline
Made with: HTML / CSS (SCSS)
Created by Clint Brown, CreatedAt September 29, 2013
Responsive : no
Dependencies : jquery.js 2.1.3
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
4. Horizontal Timeline
Made with: HTML / CSS / JS
Created by Ritesh Kumar, CreatedAt December 24, 2015
Responsive : yes
Dependencies : jquery.js 2.1.3, jquery.mobile.js 1.4.5
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
5. Horizontal Timeline
Made with: HTML / CSS / JS (Babel)
Created by Envato Tuts+ PRO, CreatedAt April 25, 2017
Responsive : yes
Dependencies : hammer.js 2.0.8
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
6. Horizontal Timeline
Made with: HTML / CSS / JS
Created by Xin YAO, CreatedAt February 18, 2016
Responsive : no
Dependencies : font-awesome.css 4.4.0, bootstrap.css 3.3.5, jquery.js 2.1.3
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
7. Panel Timeline
Made with: HTML / CSS (SCSS)
Created by Jeff Glenn, CreatedAt December 22, 2016
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
8. Horizonta Timeline
Made with: HTML / CSS (SCSS) / JS
Created by Abhishek Raj, CreatedAt October 3, 2017
Responsive : yes
Dependencies : slick.css 1.7.1, slick.js 1.7.1, jquery.js 3.2.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
9. Isometric timeline
Made with: HTML / CSS (SCSS) / JS
Created by Abhishek Raj, CreatedAt October 3, 2017
Responsive : yes
Dependencies : slick.css 1.7.1, slick.js 1.7.1, jquery.js 3.2.1
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
10. Horizontal Timeline
Made with: HTML / CSS (SCSS) / JS
Created by chrismichaelscott, CreatedAt November 11, 2014
Responsive : no
Dependencies : snap.js 0.3.0
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
11. Horizontal Timeline
Made with: HTML / CSS
Created by Simto Alev, CreatedAt April 9, 2017
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
12. Horizontal Timeline
Made with: HTML / CSS (SCSS)
Created by Charlotte Dann PRO, CreatedAt July 19, 2013
Responsive : no
Dependencies : jquery.js 2.1.3
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari
13. Horizontal Timeline
Made with: HTML / CSS (SCSS)
Created by Joe Maffei, CreatedAt May 13, 2020
Responsive : no
Dependencies : -
Compatible browsers : Chrome, Edge, Firefox, Opera, Safari