Plugin for Tailwind CSS v4
Elegant, scroll-driven edge masking. One class. Zero JavaScript.
npm i tw-fade
fade-y
this feed has a hard edge
add fade-y to the scroll area
do i need another wrapper?
no. use the element that scrolls
at the top, does the fade stay?
no, the top fade clears
and at the end?
the bottom fade clears
the newest message stays clear
horizontal tabs too?
use fade-x on the rail
can i make the fade wider?
set a larger range
top edge by itself?
use fade-t
fade-xy
fade-size-2xl
fade-range-md
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Peripheral impermanence
Fades appear only when there is more content to scroll, then ease away again at either edge.
Eased alpha ramps dissolve content into the surface instead of ending on a clipped line.
Axis, size, range, and clear-zone utilities compose directly on the scroll container.
Dissolve Recede Soften Vanish Fade Blur Ghost Diffuse Eclipse Ebb