How to create Gradient Text with Tailwind CSS

You can increase the vibrancy and visual appeal of your web design by using gradient effects on text. You don't need to write complicated CSS code to add gradient colours to your text elements when you use Tailwind CSS. In this post, we'll show you how to use TailwindCSS to create gradient text.

Output will be look like:

The full code example for creating gradient text is as follows:

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gradient text with techstackkit.com</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body>
  
  <div class="p-10 text-5xl text-center font-bold uppercase">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-red-600 to-blue-900">
        Hi from techstackkit.com
    </span>
  </div>

</body>

</html>

Output will be look like:

The another full code example for creating gradient text is as follows:

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gradient text with techstackkit.com</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body>
  <div class="p-10 text-5xl text-center font-bold uppercase">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-yellow-500 to-indigo-600">
        Hi from techstackkit.com
    </span>
  </div>
</body>

</html>

Simply copy and paste this code into your Visual Studio Code, then run it using the Live Server extension for a seamless experience.

Techstackkit

How to create Gradient Text with Tailwind CSS

Happy Coding! ❤️