Gradient stop opacity

Utilities for controlling the opacity of color stops in background gradients


Class reference

ClassProperties
from-opacity-0--tw-gradient-from-opacity: 0;
 
from-opacity-5--tw-gradient-from-opacity: 0.05;
 
from-opacity-10--tw-gradient-from-opacity: 0.1;
 
from-opacity-15--tw-gradient-from-opacity: 0.15;
 
from-opacity-20--tw-gradient-from-opacity: 0.2;
 
from-opacity-25--tw-gradient-from-opacity: 0.25;
 
from-opacity-30--tw-gradient-from-opacity: 0.3;
 
from-opacity-35--tw-gradient-from-opacity: 0.35;
 
from-opacity-40--tw-gradient-from-opacity: 0.4;
 
from-opacity-45--tw-gradient-from-opacity: 0.45;
 
from-opacity-50--tw-gradient-from-opacity: 0.5;
 
from-opacity-55--tw-gradient-from-opacity: 0.55;
 
from-opacity-60--tw-gradient-from-opacity: 0.6;
 
from-opacity-65--tw-gradient-from-opacity: 0.65;
 
from-opacity-70--tw-gradient-from-opacity: 0.7;
 
from-opacity-75--tw-gradient-from-opacity: 0.75;
 
from-opacity-80--tw-gradient-from-opacity: 0.8;
 
from-opacity-85--tw-gradient-from-opacity: 0.85;
 
from-opacity-90--tw-gradient-from-opacity: 0.9;
 
from-opacity-95--tw-gradient-from-opacity: 0.95;
 
from-opacity-100--tw-gradient-from-opacity: 1;
 
via-opacity-0--tw-gradient-via-opacity: 0;
 
via-opacity-5--tw-gradient-via-opacity: 0.05;
 
via-opacity-10--tw-gradient-via-opacity: 0.1;
 
via-opacity-15--tw-gradient-via-opacity: 0.15;
 
via-opacity-20--tw-gradient-via-opacity: 0.2;
 
via-opacity-25--tw-gradient-via-opacity: 0.25;
 
via-opacity-30--tw-gradient-via-opacity: 0.3;
 
via-opacity-35--tw-gradient-via-opacity: 0.35;
 
via-opacity-40--tw-gradient-via-opacity: 0.4;
 
via-opacity-45--tw-gradient-via-opacity: 0.45;
 
via-opacity-50--tw-gradient-via-opacity: 0.5;
 
via-opacity-55--tw-gradient-via-opacity: 0.55;
 
via-opacity-60--tw-gradient-via-opacity: 0.6;
 
via-opacity-65--tw-gradient-via-opacity: 0.65;
 
via-opacity-70--tw-gradient-via-opacity: 0.7;
 
via-opacity-75--tw-gradient-via-opacity: 0.75;
 
via-opacity-80--tw-gradient-via-opacity: 0.8;
 
via-opacity-85--tw-gradient-via-opacity: 0.85;
 
via-opacity-90--tw-gradient-via-opacity: 0.9;
 
via-opacity-95--tw-gradient-via-opacity: 0.95;
 
via-opacity-100--tw-gradient-via-opacity: 1;
 
to-opacity-0--tw-gradient-to-opacity: 0;
 
to-opacity-5--tw-gradient-to-opacity: 0.05;
 
to-opacity-10--tw-gradient-to-opacity: 0.1;
 
to-opacity-15--tw-gradient-to-opacity: 0.15;
 
to-opacity-20--tw-gradient-to-opacity: 0.2;
 
to-opacity-25--tw-gradient-to-opacity: 0.25;
 
to-opacity-30--tw-gradient-to-opacity: 0.3;
 
to-opacity-35--tw-gradient-to-opacity: 0.35;
 
to-opacity-40--tw-gradient-to-opacity: 0.4;
 
to-opacity-45--tw-gradient-to-opacity: 0.45;
 
to-opacity-50--tw-gradient-to-opacity: 0.5;
 
to-opacity-55--tw-gradient-to-opacity: 0.55;
 
to-opacity-60--tw-gradient-to-opacity: 0.6;
 
to-opacity-65--tw-gradient-to-opacity: 0.65;
 
to-opacity-70--tw-gradient-to-opacity: 0.7;
 
to-opacity-75--tw-gradient-to-opacity: 0.75;
 
to-opacity-80--tw-gradient-to-opacity: 0.8;
 
to-opacity-85--tw-gradient-to-opacity: 0.85;
 
to-opacity-90--tw-gradient-to-opacity: 0.9;
 
to-opacity-95--tw-gradient-to-opacity: 0.95;
 
to-opacity-100--tw-gradient-to-opacity: 1;
 

# 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>