Gradient Color Stops

Basic usage

Starting color

Set the starting color of a gradient using the from-{color} utilities.

<div className="bg-gradient-to-r **from-indigo-500** ..."></div>

Ending color

Set the ending color of a gradient using the to-{color} utilities.

<div className="bg-gradient-to-r from-cyan-500 **to-blue-500** ..."></div>

Gradients to do not fade in from transparent by default. To fade in from transparent, reverse the gradient direction and use a from-{color} utility.

Middle color

Add a middle color to a gradient using the via-{color} utilities.

<div className="bg-gradient-to-r from-indigo-500 **via-purple-500** to-pink-500 ..."></div>

Gradients with a from-{color} and via-{color} will fade out to transparent by default if no to-{color} is present.

Fading to transparent

Gradients fade out to transparent by default, without requiring you to add to-transparent explicitly. Tailwind intelligently calculates the right "transparent" value to use based on the starting color to avoid a bug in Safari that causes fading to simply the transparent keyword to fade through gray, which just looks awful.

<div className="bg-gradient-to-r from-blue-500 to-transparent">
  <!-- ... -->
</div>

<div className="bg-gradient-to-r from-blue-500">
  <!-- ... -->
</div>