Tailwind CSS Gradient Color Stops

Tailwind CSS provides gradient color-stop utilities to define the starting, middle, and ending colors of a gradient. These utilities can be used with gradient background classes to create colorful transitions between different colors.

Gradient Color Stops Classes

from-transparent: Sets the starting color to transparent.
from-current: Uses the element's current text color as the starting color.
from-color-shade: Sets the starting color of the gradient.
via-transparent: Sets the middle color to transparent.
via-current: Uses the element's current text color as the middle color.
via-color-shade: Sets the middle color of the gradient.
to-transparent: Sets the ending color to transparent.
to-current: Uses the element's current text color as the ending color.
to-color-shade: Sets the ending color of the gradient.

Note: Replace color-shade with a supported color and shade, such as green-500, blue-500, or red-600. Tailwind CSS also supports custom colors and gradient-stop positions.

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Gradient Color Stops</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-6">
    <h1 class="text-center text-3xl font-bold text-green-700 mb-4">
        GeeksforGeeks
    </h1>

    <h2 class="text-center text-xl font-semibold mb-6">
        Tailwind CSS Gradient Color Stops
    </h2>

    <div class="mx-auto max-w-2xl space-y-4">
        <div class="h-20 rounded-lg bg-linear-to-r from-green-500 p-4 text-white font-semibold">
            Starting Color: from-green-500
        </div>

        <div class="h-20 rounded-lg bg-linear-to-r from-green-500 to-blue-500 p-4 text-white font-semibold">
            Starting and Ending Colors
        </div>

        <div class="h-20 rounded-lg bg-linear-to-r from-indigo-500 via-yellow-400 to-green-500 p-4 text-white font-semibold">
            Starting, Middle, and Ending Colors
        </div>

        <div class="h-20 rounded-lg bg-linear-to-r from-purple-500 to-transparent p-4 font-semibold">
            Gradient Fading to Transparent
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Tailwind CSS Gradient Color Stops

Gradient Color Stops Classes

Explore