Scrollfade

Feature UI

A scrollfade effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.

Ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur....

I created this plugin because I only found JavaScript-based components for this effect, while modern CSS can achieve it natively using scroll-driven animations and CSS masks.

Browser Support (01/2026)

This utility uses scroll-driven animations (scroll-timeline, animation-timeline) which are supported in Chrome 115+, Edge 115+, Safari 26+, and Firefox (behind a flag).

Installation

npx oward-ui add scrollfade

Once the plugin is installed, import the CSS in your main Tailwind CSS file:

@import "./tailwind/scrollfade.css";

Usage

Basic Usage

Add scrollfade to any scrollable container to apply fade effects on all edges (top, bottom, left, right).

Vertical only (`scrollfade-y`)

Apply fade effect only on top and bottom edges.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Horizontal only (`scrollfade-x`)

Apply fade effect only on left and right edges.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Single Edge Utilities

For more granular control, apply fade to specific edges only:

Utility	Effect
`scrollfade-t`	Fade on top edge only
`scrollfade-b`	Fade on bottom edge only
`scrollfade-l`	Fade on left edge only
`scrollfade-r`	Fade on right edge only

Bottom fade only - Item 1

Bottom fade only - Item 2

Bottom fade only - Item 3

Bottom fade only - Item 4

Bottom fade only - Item 5

Bottom fade only - Item 6

Bottom fade only - Item 7

Bottom fade only - Item 8

Bottom fade only - Item 9

Bottom fade only - Item 10

Size Modifier

Use scrollfade-{n} to customize the fade gradient size. The value is multiplied by your Tailwind spacing unit (default: 4, i.e. 1rem).

scrollfade-2

scrollfade-12

How It Works

This utility leverages modern CSS features:

scroll-timeline: Creates a timeline tied to the scroll position of the element
animation-timeline: Links CSS animations to the scroll timeline instead of time
@property: Enables animating CSS custom properties (--t-fade, --b-fade, etc.)
mask: Uses linear gradients to create the fade effect, with sizes driven by the animated properties

The animations progress from 0% to 100% as you scroll, dynamically adjusting the mask gradient stops to reveal or hide the fade effect based on scroll position.

Scrollfade

On this page