Post thumbnail: 62 CSS Timelines

62 CSS Timelines

Collection of free HTML and CSS timeline code examples: responsive, simple, vertical, horizontal, etc. Update of March 2018 collection. 4 new items.

Table of Contents

  1. Vertical Timelines
  2. Horizontal Timelines

Vertical Timelines

Demo image: Timeline CSS

Author

  • Jonathan Snook

Made with

  • HTML / CSS

About the code

Timeline CSS

Simple dashed timeline CSS.

Demo image: Scroll Timeline

Author

  • Victor Lebedev

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel (jquery.js)

About the code

Scroll Timeline

Vertical scroll timeline.

Demo image: CSS Timeline

Author

  • Alan Houser

Made with

  • HTML / CSS (Less)

About the code

CSS Timeline

CSS timelines with "Saira" and "Chivo" fonts.

Demo image: CSS Vertical Timeline

Author

  • CP Lepag

Made with

  • HTML (Pug) / CSS (Sass)

About the code

CSS Vertical Timeline

Vertical timeline going from left to right. Fully responsive. Using Bootstrap.

Demo image: CSS Timeline

Author

  • Stas Melnikov

Made with

  • HTML
  • CSS

About the code

CSS Timeline

CSS timeline with custom properties.

Demo image: Responsive Slider Timeline

Author

  • Bruno Carvalho

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (swiper.js)

About the code

Responsive Slider Timeline

A responsive slider timeline made with Swiper JS library.

Demo image: Timeline Created with CSS Grid

Author

  • Dianna Cheng

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.

Demo Image: Advanced TimeLine
Demo Image: Advanced Timeline

Advanced Timeline

Advanced timeline: HTML / CSS / JavaScript
Made by MO7AMED
June 6, 2017

Demo Image: Timeline With Fixed Header Using Flexbox
Demo GIF: Timeline With Fixed Header Using Flexbox

Timeline With Fixed Header Using Flexbox

HTML and CSS timeline with fixed header using flexbox.
Made by Matys
May 29, 2017

Demo Image: Project Timeline
Demo Image: Project Timeline

Project Timeline

Project timeline in HTML and CSS.
Made by Russell Bishop
February 19, 2017

Demo Image: Timeline
Demo Image: Timeline

Timeline

HTML, CSS and JavaScript timeline.
Made by Mert Nerukuc
February 6, 2017

Demo Image: Hyperloop Timeline
Demo Image: Hyperloop Timeline

Hyperloop Timeline

Hyperloop timeline with HTML and CSS.
Made by Jakub Bačo
January 29, 2017

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

CSS vertical timeline with time intervals.
Made by Andres
January 25, 2017

Demo Image: Flexbox Timeline Layout
Demo Image: Flexbox Timeline Layout

Flexbox Timeline Layout

Column-based flexbox timeline layout. The goal is to have clean, semantic HTML while creating a (somewhat complex) timeline-looking layout.
Made by Paul Barker
January 16, 2017

Demo Image: Single Div Timeline
Demo Image: Single Div Timeline

Single Div Timeline

Single div timeline in HTML and CSS.
Made by Niels Voogt
December 28, 2016

Demo Image: CSS Timeline
Demo Image: CSS Timeline

CSS Timeline

HTML and CSS timeline.
Made by Rafael Youakeem
December 26, 2016

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

HTML and CSS timeline.
Made by Atticus Koya
December 22, 2016

Demo Image: Timeline
Demo Image: Timeline

Timeline

CSS timeline example with vertical and horizontal lines created with pseudo-elements.
Made by Nomisoft
December 7, 2016

Demo Image: Comments & Feeadbacks & History Timeline
Demo Image: Comments & Feeadbacks & History Timeline

Comments & Feeadbacks & History Timeline

Double side comment timeline tweenmax.
Made by Hosam Elnabawy
November 28, 2016

Demo Image: UI Design Morning Timeline
Demo Image: UI Design Morning Timeline

UI Design Morning Timeline

Morning timeline with HTML and CSS.
Made by Hưng Nguyễn
September 17, 2016

Demo Image: Timeline
Demo Image: Timeline

Timeline

Timeline with HTML and CSS.
Made by Kelsey Santangelo
November 14, 2016

Demo Image: Timeline UI
Demo Image: Timeline UI

Timeline UI

CSS implementation of dribble sketch for training purposes original design.
Made by Simon Reinsperger
September 13, 2016

Demo Image: Simple Responsive Timeline
Demo Image: Simple Responsive Timeline

Simple Responsive Timeline

Simple responsive timeline in HTML and CSS.
Made by Brady Wright
September 8, 2016

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

Vertical timeline with HTML, CSS and JavaScript.
Made by Sava Lazic
September 4, 2016

Demo Image: Responsive Timeline
Demo Image: Responsive Timeline

Responsive Timeline

Responsive Timeline with HTML, CSS and JavaScript.
Made by Arnaud Balland
August 25, 2016

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

Timeline with HTML and CSS.
Made by Yago Gonzalez
August 23, 2016

Demo Image: Pretty Timeline
Demo Image: Pretty Timeline

Pretty Timeline

HTML and CSS pretty timeline.
Made by Evan Wieland
July 14, 2016

Demo Image: CSS Timeline
Demo Image: CSS Timeline

CSS Timeline

CSS timeline with HTML and CSS.
Made by Tristan White
July 10, 2016

Demo Image: Timeline
Demo Image: Timeline

Timeline

Timeline with HTML, CSS and JavaScript.
Made by radhika prajapati
July 6, 2016

Demo Image: Vertical Timeline With CSS
Demo Image: Vertical Timeline With CSS

Vertical Timeline With CSS

Building a vertical timeline with CSS and a touch of JavaScript.
Made by Envato Tuts+
May 24, 2016

Demo Image: Timeline
Demo Image: Timeline

Timeline

Timeline for a personal project with HTML and CSS.
Made by Bruno Rodrigues
April 3, 2016

Demo Image: Collapsable Timeline
Demo Image: Collapsable Timeline

Collapsable Timeline

Collapsable timeline with HTML, CSS and JavaScript.
Made by Barney Parker
November 26, 2015

Demo Image: CSS3 Timeline
Demo Image: CSS3 Timeline

CSS3 Timeline

Fully responsive mobile first CSS timeline.
Made by Krishna Babu
November 24, 2015

Demo Image: Animated SVG Travel Timeline
Demo Image: Animated SVG Travel Timeline

Animated SVG Travel Timeline

Animated travel timeline with HTML, CSS and SVG.
Made by Vince Brown
July 29, 2015

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

Pure CSS vertical timeline.
Made by Darcy Voutt
March 11, 2015

Demo Image: Timeline Animation
Demo Image: Timeline Animation

Timeline Animation

Just messing around with a simple animated timeline.
Made by Chris Wright
February 12, 2015

Demo Image: Narrow Vertical Timeline
Demo Image: Narrow Vertical Timeline

Narrow Vertical Timeline

Making a narrow version of the timeline plugin to fit on a mobile screen.
Made by Tyler Berry
February 3, 2015

Demo Image: Timeline For A Portfolio
Demo Image: Timeline For A Portfolio

Timeline For A Portfolio

A timeline inspired by http://kohlhofer.com/, built for a portfolio page.
Made by Andrew R McHugh
February 1, 2015

Demo Image: Responsive Vertical Timeline
Demo Image: Responsive Vertical Timeline

Responsive Vertical Timeline

HTML and CSS responsive vertical timeline.
Made by Ratko Solaja
September 26, 2014

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

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

Demo Image: Timeline Scribble
Demo Image: Timeline Scribble

Timeline Scribble

HTML and CSS timeline scribble.
Made by Michaela
April 20, 2014

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

HTML and CSS timeline.
Made by Ross McNeil
January 7, 2014

Demo Image: CSS Timeline
Demo Image: CSS Timeline

CSS Timeline

Fully responsive CSS timeline.
Made by Nils Wittler
September 19, 2013

Demo Image: CSS3 Timeline
Demo Image: CSS3 Timeline

CSS3 Timeline

Please set the $vertical variable to false to see the horizontal version.
Made by Peiwen Lu
May 19, 2013

Horizontal Timelines

Demo image: Responsive Timeline v3

Author

  • Clay Larson

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.

Demo image: Nested And Color Timeline

Author

  • demonwhite

Made with

  • HTML
  • CSS/Sass
  • JavaScript/TypeScript (jquery.js)

About the code

Nested And Color Timeline

Nested & color coded interactive timeline.

Demo image: Responsive History Timeline

Author

  • Dejan Babić

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js, slick.js)

About the code

Responsive History Timeline

Horizontal responsive history timeline.

Demo image: Group Timeline

Author

  • Abhishek Raj

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jquery.js, slick.js)

About the code

Group Timeline

Horizontal group timeline.

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

Horizontal timeline with CSS and JavaScript.
Made by Envato Tuts+
April 27, 2017

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

HTML and CSS timeline with slick.js slider.
Made by cenda
April 10, 2017

Demo Image: 4 Panel Timeline CSS
Demo Image: 4 Panel Timeline CSS

4 Panel Timeline CSS

CSS only timeline for a client. Mobile styles coming soon.
Made by Jeff Glenn
December 22, 2016

Demo Image: Timeline Sequence V1
Demo Image: Timeline Sequence V1

Timeline Sequence V1

Timeline with HTML, CSS and JavaScript.
Made by Youssef
June 8, 2016

Demo Image: Horizontal Timeline Mockup
Demo Image: Horizontal Timeline Mockup

Horizontal Timeline Mockup

Horizontal timeline with HTML, CSS and JavaScript.
Made by Xin YAO
February 18, 2016

Demo Image: HR Timeline
Demo Image: HR Timeline

HR Timeline

HTML and CSS timeline.
Made by Youri
February 17, 2016

Demo Image: Horizontal Timeline Inspired By Codyhouse
Demo Image: Horizontal Timeline Inspired By Codyhouse

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

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

Horizontal timeline with HTML, CSS and JavaScript.
Made by Ritesh Kumar
December 24, 2015

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

Horizontal timeline with HTML, CSS and JavaScript.
Made by Alberto
July 6, 2015

Demo Image: Timeline
Demo Image: Timeline

Timeline

Simple timeline abstraction with HTML and CSS.
Made by Abhi Sharma
December 23, 2014

Demo Image: Animated Circle Timeline
Demo Image: Animated Circle Timeline

Animated Circle Timeline

Timeline with animated items that appear on hover of the corresponding time slot.
Made by Jen Huang
December 11, 2014

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

HTML, CSS and JavaScript horizontal timeline.
Made by Elton Mesquita
August 29, 2014

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

Timeline with HTML and CSS.
Made by Clint Brown
September 30, 2013

Demo Image: CSS3 Horizontal Timeline
Demo Image: CSS3 Horizontal Timeline

CSS3 Horizontal Timeline

HTML and CSS3 horizontal timeline.
Made by Peiwen Lu
May 17, 2013

back to top