Creating Beautiful Gradient Backgrounds in Tailwind CSS

Basic Gradients

Tailwind provides gradient utilities for common directions and color stops. The basic pattern is: bg-gradient-to-{direction} + from-{color} + to-{color}.

<!-- Simple two-color gradients -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Left to right</div>
<div class="bg-gradient-to-b from-sky-400 to-blue-600">Top to bottom</div>
<div class="bg-gradient-to-br from-pink-500 to-orange-400">Diagonal</div>

Three-Color Gradients

Use the via-{color} utility to add a middle color stop:

<div class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600">
  Three color gradient
</div>

<div class="bg-gradient-to-r from-amber-200 via-rose-400 to-violet-500">
  Sunset gradient
</div>

Gradient Directions

• to-t: to top
• to-tr: to top right
• to-r: to right
• to-br: to bottom right
• to-b: to bottom
• to-bl: to bottom left
• to-l: to left
• to-tl: to top left

Transparent Gradients

<!-- Fade to transparent -->
<div class="bg-gradient-to-t from-black/80 to-transparent">
  Image overlay that fades up
</div>

<!-- Vignette effect -->
<div class="bg-[radial-gradient(ellipse_at_center,transparent_0%,black_100%)]">
  Radial vignette
</div>

Custom Stop Positions

<!-- Custom positions using arbitrary values -->
<div class="bg-gradient-to-r from-blue-500 from-10% via-purple-500 via-50% to-pink-500 to-90%">
  Custom stop positions
</div>