How to create a gradient text

Concept Overview

Tailwind CSS does not support gradients directly on text but provides utilities to achieve the effect by:

1. Setting the text color to transparent.
2. Using bg-clip-text to make the background gradient visible within the text.
3. Applying a gradient as the background using bg-gradient-to-* utilities.

Step 1: Basic Gradient Text

Start by creating a text element and applying the gradient effect:

<h1 class="text-3xl font-bold text-transparent bg-clip-text bg-linear-to-r from-indigo-600 to-pink-400">
    Gradient Text
</h1>

Key Classes:

• text-transparent: Makes the text color transparent.
• bg-clip-text: Clips the background gradient to the text.
• bg-linear-to-r: Specifies a gradient from left to right.
• from-indigo-600 to-pink-400: Sets the gradient colors.

The gradient will be visible within the text, creating a colorful effect.

Step 2: Adding Context

Incorporate the gradient text into a complete heading or title:

<h1 class="text-3xl text-center text-gray-950 text-balance font-bold dark:text-white">
    Build stunning websites with 
    <span class="text-transparent bg-clip-text bg-linear-to-r from-indigo-600 to-pink-400">
        TailwindCSS
    </span>
</h1>

Examples

<h1 class="text-3xl text-center text-gray-950 text-balance font-bold dark:text-white">
    Create beautiful designs with 
    <span class="text-transparent bg-clip-text bg-linear-to-b from-pink-300 to-indigo-600">TailwindCSS</span>
</h1>

<h1 class="text-3xl text-center text-gray-950 text-balance font-bold dark:text-white">
    Explore the power of 
    <span class="text-transparent bg-clip-text bg-linear-to-r from-yellow-400 via-red-500 to-pink-500">TailwindCSS</span>
</h1>

Tips for Customizing Gradients

• Experiment with different gradient directions and colors to find the right combination.
• Use the to-*, from-*, and via-* classes to create complex gradients.
• Combine gradients with dark mode by using the dark: prefix, e.g., dark:bg-linear-to-br.