Gradients in Tailwind CSS

Tailwind CSS provides a set of utility classes to apply linear gradients easily, using directional classes like bg-gradient-to-r and color stops like from-, via-, and to-.

1. Basic Gradient Syntax

Apply gradient direction with bg-gradient-to-* and color stops:

<div class="bg-gradient-to-r from-purple-400 to-pink-500 p-6 rounded text-white">
    Gradient Background
</div>

Gradient Background

2. Direction Options

Use these classes to control direction:

bg-gradient-to-t – top
bg-gradient-to-tr – top right
bg-gradient-to-r – right
bg-gradient-to-br – bottom right
bg-gradient-to-b – bottom
bg-gradient-to-bl – bottom left
bg-gradient-to-l – left
bg-gradient-to-tl – top left

To Top

Diagonal

3. Using `via-*` for Midpoints

You can create three-color gradients by adding a via- stop:

<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-4 text-white rounded">
    Multicolor Gradient
</div>

Multicolor Gradient

4. Text Gradients (with `bg-clip-text`)

To apply gradients to text:

<h2 class="text-3xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 text-transparent bg-clip-text">
    Gradient Text
</h2>

Gradient Text

5. Best Practices

Use gradients for emphasis, backgrounds, or sections
Combine with text-white or text-transparent + bg-clip-text
Stick to 2–3 colors for readability and simplicity

Conclusion

Tailwind's gradient utilities give you powerful visual styles without custom CSS. They are perfect for modern UI designs like banners, cards, or hero sections.

← Previous: Text and Background Colors Next: Border Width, Color, and Radius →