scroll-mask for tailwindcss

scroll-mask is a small utility collection that adds fading edges to scrollable containers using Tailwind CSS. Instead of relying on JavaScript to detect scroll position, it uses modern CSS features like animation-timeline: scroll() and mask-image to animate the fade as the user scrolls.

The result is a subtle but useful interface detail: when content can be scrolled, the edges fade to indicate that more content is available. When the user reaches the start or end of the scroll area, the fade adjusts automatically.

Scroll Mask includes utilities for both axes, such as scroll-mask-y for vertical scrolling and scroll-mask-x for horizontal scrolling. It also supports individual edge masks like scroll-mask-t, scroll-mask-b, scroll-mask-l, and scroll-mask-r, plus custom fade stops using the -from-* suffix.

The project is designed for Tailwind CSS v4 and can be added directly to a stylesheet. Since it depends on animation-timeline: scroll(), browser support should be checked before using it in production.

Scroll Mask was created by Tim Wilson, a design engineer at Laravel.

You can find Tim on X at @actualTimWilson.