gradient progress line status steps decorative process progress with semantic color progression highlight current completion state in step sections decorative status line under cards or timelines need more expressive progress feedback than a flat color bar want progress width controlled from CSS or JS need one reusable line that can sync with step activation
Gradient Progress Line
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/gradient-progress-line.json
DiscoveryLaunch
72% completeSynced with steps
Background
Customize
Quick Start
<div class="gradient-progress-line" style="--progress-width: 66%"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 890 bytes · 30 lines
- Custom Properties
-
--progress-from--progress-via--progress-to--progress-height--progress-width - Classes
-
.gradient-progress-line
gradient progress line status steps decorative
Apply .gradient-progress-line to a block-level element and drive the visible fill with --progress-width.
The line stays CSS-only. You can update progress from inline styles, data-driven CSS variables, or JavaScript as steps become active.
Customize via CSS custom properties:
--progress-from— gradient start color--progress-via— middle color stop--progress-to— gradient end color--progress-height— track thickness, default0.35rem--progress-width— visible fill width, default0%
Because the width is a variable, this works well next to sequential step activation or any stateful UI that exposes a completion percentage.