Part 31: Gradients: Linear Gradients, Color Stops & Radial Effects

CSS gradients add rich visual depth to hero sections, buttons, and text titles.

1. Linear Gradient Directions

• bg-gradient-to-r: Left to Right.
• bg-gradient-to-l: Right to Left.
• bg-gradient-to-t: Bottom to Top.
• bg-gradient-to-b: Top to Bottom.
• bg-gradient-to-tr: Bottom-Left to Top-Right.
• bg-gradient-to-br: Top-Left to Bottom-Right.

2. Color Stops: from-*, via-*, and to-*

<!-- 2-Color Gradient -->
<div class="h-32 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-xl"></div>

<!-- 3-Color Gradient with intermediate stop -->
<div class="h-32 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 rounded-xl"></div>

3. Creating Stunning Gradient Text

Combine gradient backgrounds with background-clip and transparent text:

<h1 class="text-5xl font-extrabold bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 bg-clip-text text-transparent">
  Build the Future with Tailwind
</h1>

Key Takeaways

• Combine bg-gradient-to-* with from-*, via-*, and to-*.
• Create gradient typography using bg-clip-text text-transparent.

In Part 32, we begin Part 2 of the series covering Borders, Dividers, Dark Mode, and Custom Plugins!