Open demo

CSS code

HTML 
<ol class="gtl">
  <li class="i1"><p class="when">Week 0</p><h2>Idea on a napkin</h2><p>A billing dashboard that a human can read. That was the whole pitch.</p></li>
  <li class="i2"><p class="when">Week 6</p><h2>Prototype in testers' hands</h2><p>Twenty users, one Slack channel, and four hundred messages of feedback.</p></li>
  <li class="i3"><p class="when">Week 14</p><h2>Public launch</h2><p>Front page of two newsletters and a very long Tuesday. Servers held.</p></li>
  <li class="i4"><p class="when">Week 30</p><h2>First thousand customers</h2><p>Still just three of us. The roadmap is now a queue of very good problems.</p></li>
</ol>
CSS 
/* Gradient glow timeline: a three-stop gradient line and ring markers that glow in each item's own --c accent. */
.gtl{--gtl-bg:#0a0c14;--gtl-text:#9aa1ba;
  position:relative;margin:0;padding:0 0 0 36px;list-style:none}
.gtl::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:3px;border-radius:99px;background:linear-gradient(180deg,#22d3ee,#818cf8,#e879f9)}
.gtl>li{position:relative;padding-bottom:36px}
.gtl>li:last-child{padding-bottom:0}
.gtl>li::before{content:"";position:absolute;left:-33px;top:5px;box-sizing:border-box;width:13px;height:13px;border-radius:50%;
  background:var(--gtl-bg);border:3px solid var(--c);box-shadow:0 0 14px var(--c)}
.gtl .i1{--c:#22d3ee}.gtl .i2{--c:#60a5fa}.gtl .i3{--c:#818cf8}.gtl .i4{--c:#e879f9}
.gtl .when{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.gtl h2{margin:6px 0 5px;font-size:1rem}
.gtl li>p:last-child{margin:0;font-size:.86rem;line-height:1.65;color:var(--gtl-text);max-width:48ch}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<ol class="gtl list-unstyled mb-0">
  <li class="i1"><p class="when text-uppercase mb-0">Week 0</p><h2 class="fw-bold">Idea on a napkin</h2><p class="mb-0">A billing dashboard that a human can read. That was the whole pitch.</p></li>
  <li class="i2"><p class="when text-uppercase mb-0">Week 6</p><h2 class="fw-bold">Prototype in testers' hands</h2><p class="mb-0">Twenty users, one Slack channel, and four hundred messages of feedback.</p></li>
  <li class="i3"><p class="when text-uppercase mb-0">Week 14</p><h2 class="fw-bold">Public launch</h2><p class="mb-0">Front page of two newsletters and a very long Tuesday. Servers held.</p></li>
  <li class="i4"><p class="when text-uppercase mb-0">Week 30</p><h2 class="fw-bold">First thousand customers</h2><p class="mb-0">Still just three of us. The roadmap is now a queue of very good problems.</p></li>
</ol>
CSS 
/* Gradient glow timeline on a .list-unstyled list: a three-stop gradient line and ring markers
   that glow in each item's own --c accent. */
.gtl{--gtl-bg:#0a0c14;--gtl-text:#9aa1ba;position:relative;padding-left:36px}
.gtl::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:3px;border-radius:99px;background:linear-gradient(180deg,#22d3ee,#818cf8,#e879f9)}
.gtl>li{position:relative;padding-bottom:36px}
.gtl>li:last-child{padding-bottom:0}
.gtl>li::before{content:"";position:absolute;left:-33px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--gtl-bg);border:3px solid var(--c);box-shadow:0 0 14px var(--c)}
.gtl .i1{--c:#22d3ee}.gtl .i2{--c:#60a5fa}.gtl .i3{--c:#818cf8}.gtl .i4{--c:#e879f9}
.gtl .when{font-size:.74rem;font-weight:800;letter-spacing:.08em;color:var(--c)}
.gtl h2{margin:6px 0 5px;font-size:1rem;line-height:normal}
.gtl li>p:last-child{font-size:.86rem;line-height:1.65;color:var(--gtl-text);max-width:48ch}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<ol class="relative pl-9 before:absolute before:top-1 before:bottom-1 before:left-2 before:w-[3px] before:rounded-full before:bg-[linear-gradient(180deg,#22d3ee,#818cf8,#e879f9)]">
  <li class="[--c:#22d3ee] relative pb-9 last:pb-0 before:absolute before:top-[5px] before:-left-[33px] before:size-[13px] before:rounded-full before:border-3 before:border-(--c) before:bg-[#0a0c14] before:shadow-[0_0_14px_var(--c)]"><p class="text-[.74rem] font-extrabold tracking-[.08em] text-(--c) uppercase">Week 0</p><h2 class="mt-1.5 mb-[5px] text-[1rem] font-bold">Idea on a napkin</h2><p class="max-w-[48ch] text-[.86rem] leading-[1.65] text-[#9aa1ba]">A billing dashboard that a human can read. That was the whole pitch.</p></li>
  <li class="[--c:#60a5fa] relative pb-9 last:pb-0 before:absolute before:top-[5px] before:-left-[33px] before:size-[13px] before:rounded-full before:border-3 before:border-(--c) before:bg-[#0a0c14] before:shadow-[0_0_14px_var(--c)]"><p class="text-[.74rem] font-extrabold tracking-[.08em] text-(--c) uppercase">Week 6</p><h2 class="mt-1.5 mb-[5px] text-[1rem] font-bold">Prototype in testers' hands</h2><p class="max-w-[48ch] text-[.86rem] leading-[1.65] text-[#9aa1ba]">Twenty users, one Slack channel, and four hundred messages of feedback.</p></li>
  <li class="[--c:#818cf8] relative pb-9 last:pb-0 before:absolute before:top-[5px] before:-left-[33px] before:size-[13px] before:rounded-full before:border-3 before:border-(--c) before:bg-[#0a0c14] before:shadow-[0_0_14px_var(--c)]"><p class="text-[.74rem] font-extrabold tracking-[.08em] text-(--c) uppercase">Week 14</p><h2 class="mt-1.5 mb-[5px] text-[1rem] font-bold">Public launch</h2><p class="max-w-[48ch] text-[.86rem] leading-[1.65] text-[#9aa1ba]">Front page of two newsletters and a very long Tuesday. Servers held.</p></li>
  <li class="[--c:#e879f9] relative pb-9 last:pb-0 before:absolute before:top-[5px] before:-left-[33px] before:size-[13px] before:rounded-full before:border-3 before:border-(--c) before:bg-[#0a0c14] before:shadow-[0_0_14px_var(--c)]"><p class="text-[.74rem] font-extrabold tracking-[.08em] text-(--c) uppercase">Week 30</p><h2 class="mt-1.5 mb-[5px] text-[1rem] font-bold">First thousand customers</h2><p class="max-w-[48ch] text-[.86rem] leading-[1.65] text-[#9aa1ba]">Still just three of us. The roadmap is now a queue of very good problems.</p></li>
</ol>

About this set

A dark vertical timeline with a gradient line that runs from cyan through indigo to pink, and a glowing ring marker for each entry in that entry’s own accent colour. The demo tells a launch story in four stages, from Week 0 Idea on a napkin to Week 30 First thousand customers, each with an uppercase stage label in the matching colour, a heading and a short paragraph. Use it for startup stories, launch recaps, product announcements or any timeline on a dark landing page where a little colour helps the sequence feel like progress. Each list item sets one custom property, –c, and the marker border, the glow and the label all read from it, so recolouring a step means changing one value. The markers are ::before pseudo-elements on the list items and the line is a ::before on the list, so the markup is just an ordered list of label, heading and paragraph. The stage labels are relative weeks rather than dates, so they are plain text, not time elements. All colours pass 4.5:1 on the near-black background. The Bootstrap and Tailwind versions read the same –c variable.

What’s included

  • Cyan to indigo to pink gradient line
  • Per-item accent from one --c custom property
  • Glowing ring markers drawn with ::before
  • Every accent passes 4.5:1 on the dark background
  • Ordered list markup with no extra wrappers

Accessibility

The stages are an ordered list, each with a heading, and the markers are pseudo-elements that are not announced. Stage labels in all four accents and the grey body text reach at least 6.5:1 on #0a0c14. Nothing animates and there are no controls.

Customise it

Set --c on each list item for its accent, change the three stops in .gtl::before for the line, and --gtl-text and --gtl-bg on .gtl. In Tailwind the accent is the [--c:#…] class on each item.