Gradient stop position

Class reference

# Starting position

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

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

By default all gradients do not fade to transparent.

# Ending postion

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

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

# Middle postion

Change the middle position of a gradient using the via-{amount} utilities.

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

# Responsive

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

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

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

# Hover

To control the position of a gradient color stop of an element on hover, add the hover: prefix to any existing gradient stop position utility. For example, use hover:from-stop-30 to apply the from-stop-30 utility on hover.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-300 hover:from-stop-30 hover:to-stop-40 btn btn-lg text-white">
  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-stop-30 md:hover:from-stop-50 ...">Button</button>

# Focus

To control the postion of a gradient color stop of an element on focus, add the focus: prefix to any existing gradient stop positon utility. For example, use focus:from-stop-30 to apply the from-stop-30 utility on focus.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-300 focus:from-stop-30 focus:to-stop-40 btn btn-lg text-white">
  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-stop-30 md:focus:from-stop-50 ...">Button</button>