How do Tailwind gradient classes work?

Tailwind uses bg-gradient-to-{direction} with from-{color}, via-{color}, and to-{color} utilities. For example: 'bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500' creates a horizontal gradient from indigo through purple to pink.

What gradient directions are available in Tailwind?

Tailwind supports 8 directions: to-t (top), to-tr (top-right), to-r (right), to-br (bottom-right), to-b (bottom), to-bl (bottom-left), to-l (left), and to-tl (top-left). These correspond to 0°, 45°, 90°, 135°, 180°, 225°, 270°, and 315° angles.

Can I create radial gradients in Tailwind?

Tailwind doesn't have built-in radial gradient utilities. Our generator outputs raw CSS for radial and conic gradients that you can use with inline styles or add to your CSS. The format is: background: radial-gradient(circle, color1, color2).

How many color stops can I use?

Our generator supports up to 6 color stops with precise position control. While Tailwind's built-in classes support from, via, and to (3 stops), you can use custom CSS for more complex gradients with unlimited stops.

What are the gradient presets?

We include 6 beautiful presets: Sunset (orange to pink to purple), Ocean (cyan to blue to indigo), Forest (green to teal to cyan), Fire (yellow to orange to red), Aurora (purple to indigo to cyan to green), and Midnight (deep indigo to purple).

Gradient Generator

Tailwind Gradient Generator

Create beautiful gradients visually and get Tailwind CSS classes or raw CSS instantly

Tailwind Classes

bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500

CSS

background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);

Gradient Type

Angle90°

Color Stops (3/6)

50%

100%

Presets