Back to Blog
TutorialDecember 10, 202411 min read

CSS Gradients with Tailwind: From Basic to Advanced

Master CSS gradients in Tailwind CSS. Learn linear, radial gradients with practical examples for buttons, backgrounds, and text.

gradientscsstailwind

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!

Written by

TWColors Team

Try Our Tools

Put what you learned into practice with our free Tailwind CSS tools.

Explore 50+ Tools