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.
How to install & setup Tailwind CSS v3
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 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
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
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
Example 5
Design stylish diagonal and radial text gradients using Tailwind CSS.
<h1 class="text-5xl font-bold bg-gradient-to-br from-blue-500 to-green-500 text-transparent bg-clip-text">
Diagonal Gradient
</h1>
<h1 class="text-5xl font-bold bg-gradient-to-br from-yellow-400 via-red-500 to-pink-500 text-transparent bg-clip-text">
Radial Gradient
</h1>
tailwind diagonal and radial text gradients
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
