Gradient stop opacity

Class reference

# Starting opacity

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

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

By default all gradients do not fade to transparent.

# Ending opacity

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

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

# Middle opacity

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

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

# Responsive

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

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

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

# Hover

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

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

# Focus

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

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