Gradient Line

<div class="nuda-tl-grad">
  <div class="nuda-tl-grad__rail">
    <div class="nuda-tl-grad__fill"></div>
  </div>
  <div class="nuda-tl-grad__step nuda-tl-grad__step--done" style="left:0%">
    <div class="nuda-tl-grad__node"></div>
    <span class="nuda-tl-grad__lbl">Design</span>
  </div>
  <div class="nuda-tl-grad__step nuda-tl-grad__step--done" style="left:33.3%">
    <div class="nuda-tl-grad__node"></div>
    <span class="nuda-tl-grad__lbl">Build</span>
  </div>
  <div class="nuda-tl-grad__step nuda-tl-grad__step--done" style="left:66.6%">
    <div class="nuda-tl-grad__node"></div>
    <span class="nuda-tl-grad__lbl">Ship</span>
  </div>
  <div class="nuda-tl-grad__step" style="left:100%">
    <div class="nuda-tl-grad__node"></div>
    <span class="nuda-tl-grad__lbl">Scale</span>
  </div>
</div>

.nuda-tl-grad {
  position: relative;
  width: 230px;
  height: 56px;
  margin: 4px auto;
}

.nuda-tl-grad__rail {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}

.nuda-tl-grad__fill {
  height: 100%;
  width: 75%;
  background: linear-gradient(90deg,#6366f1,#a855f7,#e4ff54);
  border-radius: 2px;
}

.nuda-tl-grad__step {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.nuda-tl-grad__node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid rgba(255,255,255,.15);
}

.nuda-tl-grad__step--done .nuda-tl-grad__node {
  border-color: #a855f7;
  background: linear-gradient(135deg,#6366f1,#a855f7);
}

.nuda-tl-grad__lbl {
  font-size: 9px;
  color: #777;
  white-space: nowrap;
}

.nuda-tl-grad__step--done .nuda-tl-grad__lbl {
  color: #cfcfcf;
}