CSS Timeline Generator

Build vertical timeline layouts with CSS.

Jan 2024

Project Started

Initial planning and research phase.

Mar 2024

Design Phase

UI/UX design and prototyping.

Jun 2024

Development

Frontend and backend implementation.

Sep 2024

Launch

Product released to the public.

Line Color

Dot Size: 14px

.timeline {
  position: relative;
  padding-left: 30px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #3b82f6;
}
.timeline-item {
  position: relative;
  padding-bottom: 24px;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid white;
}