Ask any question about Tailwind CSS here... and get an instant response.

How do I add gradient text using Tailwind CSS?

Asked on Sep 11, 2025

Answer

In Tailwind CSS, you can apply gradient text by using a combination of utility classes for background gradients and text transparency. This involves setting a background gradient and then using the "bg-clip-text" and "text-transparent" utilities to apply the gradient to the text itself.

<!-- BEGIN COPY / PASTE -->
    <h1 class="bg-gradient-to-r from-blue-500 to-green-500 bg-clip-text text-transparent">
      Gradient Text
    </h1>
    <!-- END COPY / PASTE -->

Additional Comment:

The "bg-gradient-to-r" class creates a gradient background that transitions from left to right.
"from-blue-500" and "to-green-500" specify the start and end colors of the gradient.
"bg-clip-text" clips the background to the text, and "text-transparent" makes the text itself transparent to reveal the gradient.
This approach requires Tailwind CSS v1.7.0 or later, where "bg-clip-text" is supported.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How do I add gradient text using Tailwind CSS?

Asked on Sep 11, 2025

Answer

The Q&A Network