CSS Gradients with Tailwind: From Basic to Advanced

Linear Gradients

Basic Syntax

<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  Left to right gradient
</div>

Direction Classes

• bg-gradient-to-r - Left to right
• bg-gradient-to-br - Top-left to bottom-right
• bg-gradient-to-b - Top to bottom

Three-Color Gradients

<div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500">
  Three colors with via
</div>

Gradient Buttons

<button class="
  bg-gradient-to-r from-pink-500 to-violet-500
  hover:from-pink-600 hover:to-violet-600
  text-white font-bold py-3 px-6 rounded-full
">
  Get Started
</button>

Gradient Text

<h1 class="
  bg-gradient-to-r from-pink-500 to-violet-500
  bg-clip-text text-transparent
  text-4xl font-bold
">
  Gradient Heading
</h1>

Try our Gradient Generator to create beautiful gradients instantly!