Tailwind Tool

Tailwind Gradient Generator

Generate Tailwind CSS gradient classes with interactive controls. Copy ready-to-use Tailwind 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>

Loading your experience

We're preparing your page using the same stack we use for client projects—this should only take a moment.