How do I create a gradient in Tailwind CSS?

Use bg-gradient-to-{direction} with from-{color}, via-{color}, and to-{color} classes. For example: bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 creates a horizontal gradient.

What gradient directions does Tailwind support?

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).

Can I create radial gradients with Tailwind?

Tailwind doesn't have built-in radial gradient classes. Use custom CSS or add a custom utility in tailwind.config.js. Our generator creates the CSS and config code for you.

How many color stops can I use in a Tailwind gradient?

Tailwind's built-in classes support 3 stops: from, via, and to. For more color stops, use custom CSS with the background-image property or extend your Tailwind config.

Gradient Generator

Tailwind Gradient Generator

Create beautiful linear, radial, and conic gradients with multiple color stops

Live Preview

Preset Gradients

Tailwind Classes

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

CSS Code

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

Tailwind Config

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      backgroundImage: {
6        'custom-gradient': 'linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%)',
7      },
8    },
9  },
10}
11
12// Usage: className="bg-custom-gradient"

Gradient Type

Direction

Direction Preset

Quick Select

Color Stops (3)

50%

100%

Color Stop Preview

Gradients

100+ beautiful gradient presets

Gradient Text Generator

Create animated gradient text

Tailwind Gradient Generator

You might also like

Gradients

Gradient Text Generator