{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Numbered Steps Track
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0; position: relative; width: 320px; font-family: system-ui, sans-serif; color: #b8b6d4; } .gl-steps::before { content: ''; position: absolute; top: 18px; left: 40px; right: 40px; height: 2px; background: rgba(167,139,250,0.2); z-index: 0; } .gl-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; } .gl-step span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #18181f; border: 2px solid rgba(167,139,250,0.3); border-radius: 50%; font-family: monospace; font-size: 13px; font-weight: 700; color: #b8b6d4; } .gl-step label { font-size: 10.5px; font-weight: 600; } .gl-step-done span { background: linear-gradient(135deg, #7c6cff, #a78bfa); border-color: #a78bfa; color: #fff; } .gl-step-cur span { background: #18181f; border-color: #a78bfa; color: #a78bfa; box-shadow: 0 0 0 4px rgba(167,139,250,0.2); } .gl-step-cur label { color: #fff; }
<ol class="gl-steps"> <li class="gl-step gl-step-done"><span>1</span><label>Plan</label></li> <li class="gl-step gl-step-done"><span>2</span><label>Build</label></li> <li class="gl-step gl-step-cur"><span>3</span><label>Review</label></li> <li class="gl-step"><span>4</span><label>Ship</label></li> </ol>
Live preview
Ready