divprogress-gradientbeginner

Gradient Progress Bar

A horizontal progress bar with a gradient fill and percentage label.

Preview

Storage 65%

<div class="max-w-md">
  <div class="flex justify-between items-center mb-2">
    <span class="text-sm font-medium text-gray-700">Storage</span>
    <span class="text-sm font-medium text-gray-500">65%</span>
  </div>
  <div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
    <div class="h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full transition-all duration-500" style="width: 65%"></div>
  </div>
</div>

Color Breakdown

Track

bg-gray-200

#e5e7eb

Fill Start

from-blue-500

#3b82f6

Fill Middle

via-purple-500

#a855f7

Fill End

to-pink-500

#ec4899

Label

text-gray-700

#374151

Value

text-gray-500

#6b7280

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-700 dark:text-gray-300

Use Cases

File upload progressStorage usage indicatorsCourse completion bars

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Loading Button

button - intermediate

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Gradient Hero Section

section - beginner

CTA Banner

section - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I animate the progress bar filling up?▼

Set the initial width to 0% and use JavaScript to update the width. The transition-all duration-500 class handles the smooth animation.