Tailwind CSS Text Gradient Example

In this section we see how to use text gradient in tailwind css. For this tutorial we will create tailwind text gradient color. text gradient with multiple colors. tailwind gradient left to right top to bottom, tailwind custom text gradient color style example with Tailwind CSS.


Example 1

Tailwind CSS simple gradient text with color.

<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500">
    Tailwind CSS Gradient Text Color
</h1>
tailwind css  gradient text style

tailwind css gradient text style

Tailwind gradient color to .from-{color} class for  beginning color .to-{color} class to end color.

<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-purple-500">
    Tailwind CSS Gradient Text Color
</h1>
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-gray-500 to-cyan-500">
    Tailwind CSS Gradient Text Color
</h1>
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-blue-500">
    Tailwind CSS Gradient Text Color
</h1>
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-cyan-500">
    Tailwind CSS Gradient Text Color
</h1>  


Example 2

Tailwind CSS .bg-gradient-{direction} class start gradient text left to right top, gradient text top to bottom top to bottom.

<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-purple-500">
    Tailwind CSS Gradient Text Color
</h1>
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-b from-green-500 to-purple-500">
    Tailwind CSS Gradient Text Color
</h1>
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-l from-green-500 to-purple-500">
    Tailwind CSS Gradient Text Color
</h1>
tailwind css gradient text direction

tailwind css gradient text direction

Example 3

Tailwind gradient text with three color .from-{color} class for beginning color .to-{color} class to end color.

<h1
    class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-green-500 via-purple-500 to-yellow-500">
    Tailwind CSS 3 Gradient Text Color
</h1>
tailwind gradient three ccolor style

tailwind gradient three ccolor style

Example 4

Tailwind CSS custome gradient text color .from-[css color code] like .from-[#ffff00].

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tailwind CSS Custom Gradient Text Color </title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>
        <h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#ffff00] to-cyan-500">
            Tailwind CSS Custom Gradient Text Color
        </h1>
    </body>

</html>
Tailwind CSS Custom Gradient Text Color

Tailwind CSS Custom Gradient Text Color