Tailwind CSS Gradient Generator

How to Generate a Tailwind CSS Gradient

1. Pick your colors — choose 2 or 3 gradient colors using the color pickers above. The first color maps to from-, the optional middle color to via-, and the last color to to-.
2. Set the direction — select a gradient direction like left to right (bg-gradient-to-r), top to bottom (bg-gradient-to-b), or diagonal.
3. Preview in real components — see the gradient applied to text, buttons, and background sections instantly.
4. Copy the classes — click the copy button on any preview to get the complete Tailwind CSS class string ready to paste into your markup.

How Tailwind CSS Gradients Work

Tailwind CSS provides utility classes for building linear gradients without writing custom CSS. The system uses three components: a direction class (bg-gradient-to-r, bg-gradient-to-b, etc.), a starting color (from-blue-500), an optional middle color (via-purple-500), and an ending color (to-pink-500).

Under the hood, Tailwind compiles these classes into a standard CSS linear-gradient() with the specified direction and color stops. The via- class adds a middle color stop at 50%, creating smoother three-color transitions. You can use any Tailwind color or arbitrary values like from-[#ff7e5f] for custom hex colors.

Gradient Text in Tailwind CSS

To apply a gradient to text in Tailwind, combine the gradient classes with bg-clip-text and text-transparent. This clips the gradient background to the shape of the text and hides the original text color, making the gradient visible through the letterforms. The full class string looks like: bg-gradient-to-r from-[#color1] to-[#color2] bg-clip-text text-transparent.

This technique works in all modern browsers. Keep in mind that gradient text can be harder to read at small sizes, so it works best for headings, hero text, and display typography rather than body copy.

Gradient Buttons in Tailwind CSS

Apply gradient classes directly to a button element for a gradient background. For hover effects, Tailwind lets you modify gradient colors on hover — for example, hover:from-blue-600 hover:to-purple-600 darkens the gradient on interaction. Pair gradients with rounded-lg, shadow-lg, and text-white for polished, production-ready buttons.

Frequently Asked Questions

How do I create a gradient in Tailwind CSS?

Use the direction class (bg-gradient-to-r) with color stops (from-blue-500 to-purple-500). Tailwind compiles this into a CSS linear-gradient(). You can also add a middle color with via-.

Can I use custom colors with Tailwind gradients?

Yes. Use arbitrary value syntax: from-[#ff7e5f] to-[#feb47b]. This accepts any valid CSS color — hex, rgb, hsl, or named colors. This generator outputs these arbitrary value classes automatically based on the colors you pick.

How do I apply a gradient to text in Tailwind?

Add bg-clip-text text-transparent alongside your gradient classes. This makes the text transparent and clips the background gradient to the text shape, creating the gradient text effect.

What does via do in Tailwind gradients?

The via- class adds a middle color stop at 50% between the from- and to- colors. Without it, the gradient transitions directly between two colors. With it, you get a smoother three-color gradient.