Backgrounds and gradients

A background in Tailwind is more than a color. bg- classes set a background image, its size and position, and also gradients, which in plain CSS would need a long linear-gradient function.

Background color

You already know background colors: bg-white, bg-gray-50, bg-indigo-600/90. A light gray page with white cards on it is the most common pair:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="bg-gray-100 p-6">
  <div class="rounded-lg bg-white p-4">A card on a gray background</div>
</div>

Gradient

A linear gradient is turned on with bg-linear-to- plus a direction, and the colors are set with from- (start), via- (middle) and to- (end):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="h-24 rounded-xl bg-linear-to-r from-indigo-500 to-pink-500"></div>

The strip blends from blue to pink from left to right. Directions are to-r, to-l, to-t, to-b and the diagonals to-tr, to-br, to-bl, to-tl. An angle can be given as a number: bg-linear-45.

A middle color and a radial gradient:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="h-20 rounded-xl bg-linear-to-r from-amber-400 via-rose-500 to-violet-600"></div>
<div class="mt-3 h-32 rounded-xl bg-radial from-sky-300 to-indigo-800"></div>

The first strip passes through three colors; in the second block a light spot in the center darkens toward the edges. In Tailwind 3 the linear gradient was called bg-gradient-to-r — that is what older examples use.

Gradient text

A gradient can be "cut out" by letters: bg-clip-text clips the background to the text, and text-transparent makes the letters themselves transparent:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<h2 class="bg-linear-to-r from-indigo-600 to-pink-500 bg-clip-text text-4xl font-extrabold text-transparent">
  Big sale
</h2>

Background image

The image goes into square brackets — an arbitrary value, which has its own lesson. bg-cover stretches the image over the whole block, bg-center centers it:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex h-48 items-end rounded-xl bg-[url(/media/photo-800x500.jpg)] bg-cover bg-center p-4">
  <p class="rounded bg-white/80 px-3 py-1 font-semibold">New collection</p>
</div>

The image fills the block, and a semi-transparent label with text sits in the bottom corner.

Common mistake

Setting the gradient colors but forgetting the direction class:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="h-16 rounded-xl from-indigo-500 to-pink-500"></div>

The block is empty: from- and to- only store colors, while the gradient is drawn by bg-linear-to-r, bg-radial or bg-conic. You need both kinds of classes.