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.

The Best WordPress Web Development Agency

Schedule a call

Let us get back to you