Utilities
All available easing gradient utilities
Syntax
Combine an easing function with a direction: bg-{easing}-to-{direction}
For the default ease curve, the easing part is just ease: bg-ease-to-r. For all others, use the full name: bg-ease-in-to-r, bg-ease-out-to-b, bg-ease-in-out-to-br.
Easing Functions
ease
ease-in
ease-out
ease-in-out
| Utility | Easing Function | Description |
|---|---|---|
bg-ease-to-{dir} | ease | Default easing (slow-fast-slow) |
bg-ease-in-to-{dir} | ease-in | Slow start, fast end |
bg-ease-out-to-{dir} | ease-out | Fast start, slow end |
bg-ease-in-out-to-{dir} | ease-in-out | Slow start and end |
Directions
to-t
to-tr
to-r
to-br
to-b
to-bl
to-l
to-tl
| Short | Direction | CSS Value |
|---|---|---|
t | Top | to top |
r | Right | to right |
b | Bottom | to bottom |
l | Left | to left |
tl | Top Left | to top left |
tr | Top Right | to top right |
bl | Bottom Left | to bottom left |
br | Bottom Right | to bottom right |
Transparency Fades
Skip to-* and the plugin fades to transparent automatically.
<div class="bg-ease-to-t from-blue-500"></div>
Using with Tailwind Colors
<div class="bg-ease-to-r from-indigo-500 to-cyan-500"></div>
<div class="bg-ease-out-to-b from-emerald-400 to-cyan-500"></div>
<div class="bg-ease-in-out-to-br from-amber-500 to-rose-600"></div>
Full Class Reference
| Direction | Class |
|---|---|
| Top | bg-ease-to-t |
| Top Right | bg-ease-to-tr |
| Right | bg-ease-to-r |
| Bottom Right | bg-ease-to-br |
| Bottom | bg-ease-to-b |
| Bottom Left | bg-ease-to-bl |
| Left | bg-ease-to-l |
| Top Left | bg-ease-to-tl |
| Direction | Class |
|---|---|
| Top | bg-ease-in-to-t |
| Top Right | bg-ease-in-to-tr |
| Right | bg-ease-in-to-r |
| Bottom Right | bg-ease-in-to-br |
| Bottom | bg-ease-in-to-b |
| Bottom Left | bg-ease-in-to-bl |
| Left | bg-ease-in-to-l |
| Top Left | bg-ease-in-to-tl |
| Direction | Class |
|---|---|
| Top | bg-ease-out-to-t |
| Top Right | bg-ease-out-to-tr |
| Right | bg-ease-out-to-r |
| Bottom Right | bg-ease-out-to-br |
| Bottom | bg-ease-out-to-b |
| Bottom Left | bg-ease-out-to-bl |
| Left | bg-ease-out-to-l |
| Top Left | bg-ease-out-to-tl |
| Direction | Class |
|---|---|
| Top | bg-ease-in-out-to-t |
| Top Right | bg-ease-in-out-to-tr |
| Right | bg-ease-in-out-to-r |
| Bottom Right | bg-ease-in-out-to-br |
| Bottom | bg-ease-in-out-to-b |
| Bottom Left | bg-ease-in-out-to-bl |
| Left | bg-ease-in-out-to-l |
| Top Left | bg-ease-in-out-to-tl |