Gradient Flow
Multi-step wizard where the "done" line is a flowing gradient (not a static fill) — the light visibly travels through the completed segments toward the current step.
Gradient Flow the 7th of 22 designs in the 22 CSS Button Group Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<ol class="cbgp-flow" aria-label="Checkout progress">
<li class="is-done">
<span class="cbgp-flow-num">1</span><span class="cbgp-flow-label">Cart</span>
</li>
<li class="is-done">
<span class="cbgp-flow-num">2</span><span class="cbgp-flow-label">Address</span>
</li>
<li class="is-current" aria-current="step">
<span class="cbgp-flow-num">3</span><span class="cbgp-flow-label">Payment</span>
</li>
<li><span class="cbgp-flow-num">4</span><span class="cbgp-flow-label">Review</span></li>
</ol> .cbgp-flow {
display: inline-flex; gap: 0;
list-style: none; padding: 0; margin: 0;
}
.cbgp-flow li {
display: flex; align-items: center; gap: 10px;
padding: 6px 0;
font: 700 11px/1 ui-monospace, monospace;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(220,225,230,0.4);
position: relative;
}
.cbgp-flow li:not(:last-child) { padding-right: 56px; }
.cbgp-flow li:not(:last-child)::after {
content: '';
position: absolute; right: 8px; top: 50%;
width: 36px; height: 2px;
background: rgba(255,255,255,0.08);
transform: translateY(-50%);
border-radius: 1px;
}
.cbgp-flow li.is-done::after {
background:
linear-gradient(90deg, #00ffe0 0%, #ff5af1 100%) 0% 0% / 200% 100%;
animation: cbgp-flow-shift 2.4s linear infinite;
box-shadow: 0 0 8px rgba(0,255,224,0.5);
}
@keyframes cbgp-flow-shift { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }
.cbgp-flow-num {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
background: #0a0d18;
border: 1.5px solid rgba(255,255,255,0.1);
font: 800 11px/1 ui-monospace, monospace;
color: rgba(220,225,230,0.4);
transition: all 0.3s;
}
.cbgp-flow li.is-done .cbgp-flow-num {
background: linear-gradient(135deg, #00ffe0, #00b8a8);
border-color: #00ffe0;
color: #001f1c;
box-shadow: 0 0 10px rgba(0,255,224,0.4);
}
.cbgp-flow li.is-current .cbgp-flow-num {
background: linear-gradient(135deg, #ff5af1, #c43cb8);
border-color: #ff5af1;
color: #1a0518;
box-shadow: 0 0 0 4px rgba(255,90,241,0.18), 0 0 16px rgba(255,90,241,0.4);
color: #fff;
}
.cbgp-flow li.is-current { color: #ff5af1; }
.cbgp-flow li.is-done { color: rgba(0,255,224,0.85); }
@media (prefers-reduced-motion: reduce) {
.cbgp-flow li.is-done::after { animation: none; }
}