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.
Recommended Links: