0
0
Tailwindmarkup~5 mins

Gradient utilities (from, via, to) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Gradients add smooth color changes to backgrounds. Tailwind makes it easy to create them with simple classes.

You want a colorful background that changes from one color to another.
You want to highlight a button with a smooth color blend.
You want a banner with a soft color transition.
You want to create a modern look with multiple colors blending.
You want to add depth or interest to a section without images.
Syntax
Tailwind
bg-gradient-to-{direction} from-{color} via-{color} to-{color}

bg-gradient-to-{direction} sets the gradient direction (like t for top, r for right).

from-, via-, and to- set the colors at the start, middle, and end of the gradient.

Examples
Gradient goes from blue on the left to green on the right.
Tailwind
bg-gradient-to-r from-blue-500 to-green-500
Gradient goes from red at top, through yellow in middle, to green at bottom.
Tailwind
bg-gradient-to-b from-red-400 via-yellow-300 to-green-400
Gradient goes diagonally from top-left to bottom-right, purple to pink.
Tailwind
bg-gradient-to-tr from-purple-600 to-pink-400
Sample Program

This page shows a box with a smooth gradient background from blue to purple to pink horizontally. The text is centered and easy to read.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gradient Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="w-64 h-32 rounded-lg bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 flex items-center justify-center text-white font-bold text-lg">
    Gradient Box
  </div>
</body>
</html>
OutputSuccess
Important Notes

You can use as many colors as you want by combining from-, via-, and to-.

Make sure your text color contrasts well with the gradient for readability.

Use bg-gradient-to-{direction} to control the gradient angle easily.

Summary

Use from-, via-, and to- classes to create smooth color gradients.

Set gradient direction with bg-gradient-to-{direction}.

Gradients add visual interest and modern style to your web elements.