Gradient stop position

Utilities for controlling the position of color stops in background gradients


Class reference

ClassProperties
from-stop-0--tw-gradient-from-stop: 0%;
from-stop-5--tw-gradient-from-stop: 5%;
from-stop-10--tw-gradient-from-stop: 10%;
from-stop-15--tw-gradient-from-stop: 15%;
from-stop-20--tw-gradient-from-stop: 20%;
from-stop-25--tw-gradient-from-stop: 25%;
from-stop-30--tw-gradient-from-stop: 30%;
from-stop-35--tw-gradient-from-stop: 35%;
from-stop-40--tw-gradient-from-stop: 40%;
from-stop-45--tw-gradient-from-stop: 45%;
from-stop-50--tw-gradient-from-stop: 50%;
from-stop-55--tw-gradient-from-stop: 55%;
from-stop-60--tw-gradient-from-stop: 60%;
from-stop-65--tw-gradient-from-stop: 65%;
from-stop-70--tw-gradient-from-stop: 70%;
from-stop-75--tw-gradient-from-stop: 75%;
from-stop-80--tw-gradient-from-stop: 80%;
from-stop-85--tw-gradient-from-stop: 85%;
from-stop-90--tw-gradient-from-stop: 90%;
from-stop-95--tw-gradient-from-stop: 95%;
from-stop-100--tw-gradient-from-stop: 100%;
via-stop-0--tw-gradient-via-stop: 0%;
via-stop-5--tw-gradient-via-stop: 5%;
via-stop-10--tw-gradient-via-stop: 10%;
via-stop-15--tw-gradient-via-stop: 15%;
via-stop-20--tw-gradient-via-stop: 20%;
via-stop-25--tw-gradient-via-stop: 25%;
via-stop-30--tw-gradient-via-stop: 30%;
via-stop-35--tw-gradient-via-stop: 35%;
via-stop-40--tw-gradient-via-stop: 40%;
via-stop-45--tw-gradient-via-stop: 45%;
via-stop-50--tw-gradient-via-stop: 50%;
via-stop-55--tw-gradient-via-stop: 55%;
via-stop-60--tw-gradient-via-stop: 60%;
via-stop-65--tw-gradient-via-stop: 65%;
via-stop-70--tw-gradient-via-stop: 70%;
via-stop-75--tw-gradient-via-stop: 75%;
via-stop-80--tw-gradient-via-stop: 80%;
via-stop-85--tw-gradient-via-stop: 85%;
via-stop-90--tw-gradient-via-stop: 90%;
via-stop-95--tw-gradient-via-stop: 95%;
via-stop-100--tw-gradient-via-stop: 100%;
to-stop-0--tw-gradient-to-stop: 0%;
to-stop-5--tw-gradient-to-stop: 5%;
to-stop-10--tw-gradient-to-stop: 10%;
to-stop-15--tw-gradient-to-stop: 15%;
to-stop-20--tw-gradient-to-stop: 20%;
to-stop-25--tw-gradient-to-stop: 25%;
to-stop-30--tw-gradient-to-stop: 30%;
to-stop-35--tw-gradient-to-stop: 35%;
to-stop-40--tw-gradient-to-stop: 40%;
to-stop-45--tw-gradient-to-stop: 45%;
to-stop-50--tw-gradient-to-stop: 50%;
to-stop-55--tw-gradient-to-stop: 55%;
to-stop-60--tw-gradient-to-stop: 60%;
to-stop-65--tw-gradient-to-stop: 65%;
to-stop-70--tw-gradient-to-stop: 70%;
to-stop-75--tw-gradient-to-stop: 75%;
to-stop-80--tw-gradient-to-stop: 80%;
to-stop-85--tw-gradient-to-stop: 85%;
to-stop-90--tw-gradient-to-stop: 90%;
to-stop-95--tw-gradient-to-stop: 95%;
to-stop-100--tw-gradient-to-stop: 100%;

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