Gradient color stops

Class reference

# Starting color

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

<div class="h-24 rounded bg-gradient-to-r from-magenta-300"></div>

Gradients do not to transparent by default.

# Ending color

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

<div class="h-24 rounded bg-gradient-to-r from-teal-400 to-blue-300"></div>

# Middle color

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

<div class="h-24 rounded bg-gradient-to-r from-violet-400 via-pink-300 to-red-300"></div>

Gradients with a from-{color} and via-{color} will not fade out to transparent by default.

# Responsive

To control the gradient color stops of an element at a specific breakpoint, add a {screen}: prefix to any existing gradient color stop utility. For example, use md:from-green-300 to apply the from-green-300 utility at only medium screen sizes and above.

<div class="bg-gradient-to-r from-violet-400 md:from-orange-300"></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.

# Hover

To control the gradient color stops of an element on hover, add the hover: prefix to any existing gradient color stop utility. For example, use hover:bg-blue-300 to apply the bg-blue-300 utility on hover.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-300 hover:from-pink-300 hover:to-orange-300 btn btn-lg text-white rounded">
  Hover me
</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:from-blue-300 md:hover:from-blue-500 ...">Button</button>

# Focus

To control the gradient color stops of an element on focus, add the focus: prefix to any existing gradient color stop utility. For example, use focus:bg-blue-300 to apply the bg-blue-300 utility on focus.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-300 focus:from-pink-300 focus:to-orange-300 btn btn-lg text-white rounded">
  Focus me
</button>

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:from-blue-300 md:focus:from-blue-500 ...">Button</button>