Gradient Progress Bars

Gradient Progress Bar

Combine gradient backgrounds with CSS variables to create colorful, animated progress indicators.

Example

.progress { height: 12px; background: #e9ecef; border-radius: 99px; overflow: hidden; }
.progress-bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  width: var(--pct, 0%); transition: width 0.6s ease;
}

CSS

Full Editor

Pro Tip

Set --pct from JavaScript: bar.style.setProperty("--pct", "75%").

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned