Tailwind Gradient Generator

Compose Tailwind gradient classes with precise color stops, direction control, and a live preview before you paste the code.

Settings

Gradient Type

Direction

Smoothness

Enable Animation

Color Stops

Stop 1

Color

blue-500

Position: 0%

Opacity: 100%

Stop 2

Color

purple-500

Position: 100%

Opacity: 100%

Tailwind Classes

Usage Example:

<div className="bg-gradient-to-r from-blue-500 to-purple-500">
  <!-- Your content here -->
</div>