How to Build a Clean CSS Timeline Without Plugins
I ended up looking for this because I wanted a timeline on a page, but I really didn’t want to make it overly complicated.
After digging through a lot of posts and examples, this approach felt like a good balance: simple, easy to adjust, and good-looking enough for most basic use cases.
There are plugins that can do this too, but some of them cost money, and many are documented only in English. If all you need is a straightforward vertical timeline, plain CSS is often enough.
Here’s the result first:
The code is below. You can modify it yourself as needed, and with just a little CSS/HTML knowledge, it’s not hard to tweak the layout, colors, or spacing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>timeline</title>
<style>
.timeline-small {
max-width: 350px;
max-height: 630px;
overflow: hidden;
margin: 30px auto 0;
box-shadow: 0 0 40px #a0a0a0;
font-family: 'Open Sans', sans-serif;
}
.timeline-small-body ul {
padding: 1em 0 0 2em;
margin: 0;
list-style: none;
position: relative;
}
.timeline-small-body ul::before {
content: ' ';
height: 100%;
width: 5px;
background-color: #d9d9d9;
position: absolute;
top: 0;
left: 2.4em;
z-index: -1;
}
.timeline-small-body li div {
display: inline-block;
margin: 1em 0;
vertical-align: top;
}
.timeline-small-body .bullet {
width: 1rem;
height: 1rem;
box-sizing: border-box;
border-radius: 50%;
background: #fff;
z-index: 1;
margin-right: 1rem;
margin-top: 7%;
}
.timeline-small-body .bullet.pink {
background-color: hotpink;
border: 3px solid #F93B69;
}
.timeline-small-body .bullet.green {
background-color: lightseagreen;
border: 3px solid #B0E8E2;
}
.timeline-small-body .bullet.blue {
background-color: aquamarine;
border: 3px solid cadetblue;
}
.timeline-small-body .bullet.orange {
background-color: salmon;
border: 3px solid #EB8B6E;
}
.timeline-small-body .date {
width: 23%;
font-size: 0.75em;
padding-top: 0.40rem;
padding-right: 2rem;
}
.timeline-small-body .desc {
width: 50%;
}
.timeline-small-body h3 {
font-size: 0.9em;
font-weight: 400;
margin: 0;
}
.timeline-small-body h4 {
margin: 0;
font-size: 0.7em;
font-weight: 400;
color: #808080;
}
</style>
The overall idea is very direct:
.timeline-smallcontrols the outer container size and shadow.- The vertical line is created with
ul::before. - Each event node uses
.bullet, with different color classes likepink,green,blue, andorange. .dateand.descsplit the content area so the time and description can sit side by side.h3andh4keep the text hierarchy compact and clean.
If you already have a basic structure in place, you can use this as a starting point and then adjust widths, colors, or spacing to fit your own page design.