Unique Timeline Design Using CSS Only
By: The Softorax Development Team
HTML
<div class="fullTimeline">
<h1>Timeline design using CSS only</h1>
<div class="timelineBox">
<div class="timelineNumber">1</div>
<div class="timelineText">
<div class="timelineHeading">2018 – The Beginning</div>
<div class="timelineContent">We started as a small team of three passionate developers with one goal: build meaningful digital experiences.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">2</div>
<div class="timelineText">
<div class="timelineHeading">2019 – First Milestone</div>
<div class="timelineContent">Launched our first commercial project, gaining recognition for innovative UI design and efficient performance.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">3</div>
<div class="timelineText">
<div class="timelineHeading">2020 – Expansion</div>
<div class="timelineContent">Expanded our team to 10 members and moved into a dedicated office space. Introduced our first web app product.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">4</div>
<div class="timelineText">
<div class="timelineHeading">2021 – Recognition</div>
<div class="timelineContent">Received local startup award for “Best Emerging Tech Firm.” Partnered with international clients.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">5</div>
<div class="timelineText">
<div class="timelineHeading">2022 – Product Launch</div>
<div class="timelineContent">Released our flagship SaaS platform, reaching over 5,000 users within three months.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">6</div>
<div class="timelineText">
<div class="timelineHeading">2023 – Diversification</div>
<div class="timelineContent">Entered new markets and started offering AI integration and automation services.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">7</div>
<div class="timelineText">
<div class="timelineHeading">2024 – Global Presence</div>
<div class="timelineContent">Opened remote branches across two continents. Team size grew to 40+ professionals.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">8</div>
<div class="timelineText">
<div class="timelineHeading">2025 – Innovation Drive</div>
<div class="timelineContent">Invested in R&D to develop next-gen web and AI-driven tools to enhance digital ecosystems.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">9</div>
<div class="timelineText">
<div class="timelineHeading">2026 – Community Focus</div>
<div class="timelineContent">Hosted our first online developer summit with 2,000+ participants from 15 countries.</div>
</div>
</div>
<div class="timelineBox">
<div class="timelineNumber">10</div>
<div class="timelineText">
<div class="timelineHeading">2027 – Future Vision</div>
<div class="timelineContent">Aiming to become a global leader in digital innovation with sustainability and user experience at the core.</div>
</div>
</div>
</div>
CSS
body {
box-sizing: border-box;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
height: auto;
width: 100vw;
background: #121212;
}
.fullTimeline {
padding: 100% 0%;
height: auto;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
gap: 70px;
}
.fullTimeline h1 {
background: linear-gradient(90deg, #845ec2 0%, #ff9671 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.timelineBox {
display: flex;
flex-direction: column;
position: relative;
width: 50%;
color: #FFFFFF;
gap: 20px;
}
.timelineBox::after {
content: "";
position:absolute;
height: calc(100% + 70px);
width: 3px;
background: linear-gradient(0deg, #ff9671 0%, rgba(255, 255, 255, 0) 80%);
z-index: -1;
}
.timelineBox:last-child::after {
background: transparent;
}
.timelineNumber {
position: absolute;
display: flex;
transform: translate(-50%, -50%);
left: 0;
top: 12px;
font-size: 32px;
font-weight: 600;
height: 50px;
width: 50px;
background: linear-gradient(90deg, #845ec2 0%, #ff9671 100%);
color: #ffffff;
justify-content: center;
align-items: center;
margin: 0;
border-radius: 50px;
}
.timelineText {
display: flex;
flex-direction: column;
padding-left: 40px;
gap: 20px;
}
.timelineHeading {
font-size: 20px;
font-weight: 600;
color: #ff9671;
}
.timelineContent {
color: #c1c1c1;
}
.timelineHeading, .timelineContent, .fullTimeline h1 {
animation: comeFade both;
animation-timeline: view();
animation-range: entry 15% cover 30%;
}
@keyframes comeFade {
from {
transform: translateY(30px) scale(0.5);
}
to {
transform: translateY(0px) scale(1);
}
}
Final Result
Timeline design using CSS only
1
2018 – The Beginning
We started as a small team of three passionate developers with one goal: build meaningful digital experiences.
2
2019 – First Milestone
Launched our first commercial project, gaining recognition for innovative UI design and efficient performance.
3
2020 – Expansion
Expanded our team to 10 members and moved into a dedicated office space. Introduced our first web app product.
4
2021 – Recognition
Received local startup award for “Best Emerging Tech Firm.” Partnered with international clients.
5
2022 – Product Launch
Released our flagship SaaS platform, reaching over 5,000 users within three months.
6
2023 – Diversification
Entered new markets and started offering AI integration and automation services.
7
2024 – Global Presence
Opened remote branches across two continents. Team size grew to 40+ professionals.
8
2025 – Innovation Drive
Invested in R&D to develop next-gen web and AI-driven tools to enhance digital ecosystems.
9
2026 – Community Focus
Hosted our first online developer summit with 2,000+ participants from 15 countries.
10
2027 – Future Vision
Aiming to become a global leader in digital innovation with sustainability and user experience at the core.
