90+ CSS Timelines
Chronological data requires linear structure. CSS Timelines organize sequential events, removing visual clutter between the user and the screen. This updated collection delivers minimalist tracking layouts for modern UI design. Utilizing these curated snippets replaces chaotic spacing with predictable, structured data flow.
These examples rely on Flexbox and CSS Grid for precise node alignment. The code utilizes pseudo-elements (::before, ::after) and absolute positioning to construct solid connective lines. Scroll-triggered motion leverages hardware acceleration, animating isolated properties like transform and opacity. This ensures a 60fps frame rate without reflows. The HTML structure remains strictly semantic, maintaining high layout stability and rapid rendering.
Every free demo is fully responsive and cross-browser compatible. Users can instantly download the raw code or fork a sequence on CodePen.
Examples
Responsive Two-Column Timeline
This is a Responsive Two-Column Timeline. It transforms list-based historical data into a structured, alternating visual path. Its function is to allow users to navigate chronological content with ease, using a centralized vertical bar to guide the eye while images and text blocks oscillate between left and right columns.
Chrome 80+
Edge 80+
Firefox 75+
Safari 13+
See the Pen Responsive Two-Column Timeline.
Timeline with Sticky Dates
A sleek, minimalistic timeline built with pure CSS, utilizing position: sticky to pin the year, creating a smooth and convenient scrolling experience without extra JS.
See the Pen Timeline with Sticky Dates.
An interactive radial carousel in pure CSS, where element positioning in a circle is calculated via calc(). State management is handled without JS using the “radio button hack” and the :has() pseudo-class, which triggers rotation animations and sequential content appearance.
A vertical timeline, implemented entirely in CSS, where the central axis, markers, and other decorative elements are created using ::before and ::after pseudo-elements. Precise positioning of all details is achieved with position: relative and absolute, keeping the markup clean and semantic.
Alternating list with dashed outline. Even items have left border and left rounded corners, odd — right border and right rounding. First and last items trim extra rounding. Creates “zigzag” list effect.
Timeline with color-coded event types. Each event has left icon with date and right description. Vertical connecting line and circle via pseudo-elements. Three color themes via modifiers. Vertical stack on mobile.
Alternating timeline with animated connecting lines. Even and odd events mirrored. Lines from icon drawn via pseudo-elements with fillLeft/fillTop animation. Three color themes via modifiers. Stack on mobile.
Alternating list with CSS counters numbering. Each paragraph has gradient border via border-image. Numbered circles aligned to border edges: left for even, right for odd.
Responsive timeline with color coding via CSS variables. Items rearrange into grid based on screen width. Pseudo-elements form connecting arrows, direction changes based on grid position. Colors cycle via --hue.
UIkit-based timeline with vertical line via pseudo-element. Each item contains left badge icon and right content card. Cards height-limited with scroll. Labels indicate event type.
Vertical timeline in dark theme. Each item contains left icon and right content card. Color coding via modifiers. Card tail formed by rotated pseudo-element.
Two-sided timeline with center line. Left and right items alternate. Each contains date, icon, and content card. Content rounding creates “bubble” effect. Reflows to left-side variant on mobile.
Vertical timeline with circular markers. Each item contains time and description. Left border with dot via pseudo-element creates timeline line. Responsive mixins control font sizes.
Dashboard interface with side menu and notification feed. Left panel with navigation icons, right side — vertical timeline with dotted line and hover-color-changing markers. Search field at top.
