Tw-fade: pure CSS scroll-driven edge masking

The fade affects scroll bars, which is quite unpleasant (and arguably catastrophic if you have two-dimensional scrolling). The traditional background-image technique avoided this by sitting inside the scroll area. I don’t think you can achieve that with mask, without an additional element. But I think it might be worth that extra element.

What is happening here and why is it special? The site itself does show, but does not tell (which in itself is somewhat refreshing).

hey all, just released a plugin to scratch an itch. i'd been lazily adding linear gradients on the edges of scrollviews and animating them with JS based on scroll position. turns out you can do a lot better with pure CSS now by leveraging masking + the new CSS scroll animations API.

works in pretty much all browers excepting firefox which doesn't have CSS scroll animations yet, but the nightly version does, so it should be generally available soon.

demo site: https://pete.design/tw-fade

github: https://github.com/petekp/tw-fade

npmjs: https://www.npmjs.com/package/tw-fade

if you use it i'd love to hear how it goes and if you have any feedback.

This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.

I also love the pure CSS parallax effect of the "tw-fade" title shadow using multiple spans with different styles that fade in and out based on scroll position. Very clever!

FYI scrolling this page is slow as balls on my computer. Firefox on Ubuntu.

I don't know if this page is a demonstration of your plugin, I'm guessing yes but I can't see any masking going on, it seems to scroll just like a normal page but much more laggy.

EDIT: Oh I see in your comment now, it doesn't work in Firefox. My mistake.

Neat! I'd much rather just copy-paste the CSS from the site though, would never install something like this as a package.

arrow keys don't work, pgdown doesn't work

works in pretty much all browers excepting firefox which doesn't have CSS scroll animations yet, but the nightly version does, so it should be generally available soon.

demo site: https://pete.design/tw-fade

github: https://github.com/petekp/tw-fade

npmjs: https://www.npmjs.com/package/tw-fade

if you use it i'd love to hear how it goes and if you have any feedback.

What is happening here and why is it special? The site itself does show, but does not tell (which in itself is somewhat refreshing).

I also love the pure CSS parallax effect of the "tw-fade" title shadow using multiple spans with different styles that fade in and out based on scroll position. Very clever!

FYI scrolling this page is slow as balls on my computer. Firefox on Ubuntu.

I don't know if this page is a demonstration of your plugin, I'm guessing yes but I can't see any masking going on, it seems to scroll just like a normal page but much more laggy.

EDIT: Oh I see in your comment now, it doesn't work in Firefox. My mistake.

I was wondering the same thing and I'm in Chrome. The "Horizontal" and "Vertical" sections don't seem to do anything, but maybe I'm just not understanding what I should be looking for?

This has a frame drop issue on Chrome Version 149.0.7827.156. It isn't close to smooth on my browser.

Neat! I'd much rather just copy-paste the CSS from the site though, would never install something like this as a package.

This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.

It's fine on my phone, Brave Android. Maybe it doesn't work on Firefox?

It might be related to the liquid glass imitation in the color scheme picker

arrow keys don't work, pgdown doesn't work

I don't think that would be an issue of this CSS, that's just normal `overflow: auto` behaviour.

pgdown works for me (firefox on linux)

arrow keys also seem to work fine but you have to click-to-focus first.

This has a frame drop issue on Chrome Version 149.0.7827.156. It isn't close to smooth on my browser.

I was wondering the same thing and I'm in Chrome. The "Horizontal" and "Vertical" sections don't seem to do anything, but maybe I'm just not understanding what I should be looking for?

It's fine on my phone, Brave Android. Maybe it doesn't work on Firefox?

I don't think that would be an issue of this CSS, that's just normal `overflow: auto` behaviour.

pgdown works for me (firefox on linux)

arrow keys also seem to work fine but you have to click-to-focus first.

It might be related to the liquid glass imitation in the color scheme picker

I think you're right. Performance profile shows lots of long spans relating to that element, and deleting that element makes the page scroll much more smoothly.

There are still other issues though. The performance of this page feels pretty bad in general.

I think you're right. Performance profile shows lots of long spans relating to that element, and deleting that element makes the page scroll much more smoothly.

There are still other issues though. The performance of this page feels pretty bad in general.

Plugin for Tailwind CSS v4

Elegant, scroll-driven edge masking. One class. Zero JavaScript.

npm i tw-fade

Horizontal `fade-x`

Vertical `fade-y`

hey! finally trying tw-fade 👋

oh nice — welcome

these scroll lists are slick

thanks, it’s all CSS

this thread fades at the edges while i scroll 👀

that’s tw-fade ✨

some scroll library?

nope — a pure CSS mask

zero JavaScript

so how does it know i’m scrolling?

scroll-driven CSS — the fade is scroll-gated

does it soften both edges?

fade-y — one class on the container

but the newest message stays sharp 🔥

pinned to the bottom, yep — scroll up and both edges dissolve ↕︎

Advanced `fade-xy fade-size-2xl fade-range-md`

Peripheral impermanence

Fade size

2xl

Scroll range

2xl

Edges

Scroll aware

Fades appear only when there is more content to scroll, then ease away again at either edge.

Eased gradients

Eased alpha ramps dissolve content into the surface instead of ending on a clipped line.

Composable

Axis, size, range, and clear-zone utilities compose directly on the scroll container.

Works on any background

Dissolve Recede Soften Vanish Fade Blur Ghost Diffuse Eclipse Ebb

Hacker Times

Hacker Times

Tw-fade: pure CSS scroll-driven edge masking

Discussion

Discussion

Horizontal `fade-x`

Vertical `fade-y`

Advanced `fade-xy fade-size-2xl fade-range-md`

Scroll aware

Eased gradients

Composable

Works on any background

Hacker Times

Hacker Times

Tw-fade: pure CSS scroll-driven edge masking

Discussion

Discussion

Horizontal fade-x

Vertical fade-y

Advanced fade-xy fade-size-2xl fade-range-md

Scroll aware

Eased gradients

Composable

Works on any background

Horizontal `fade-x`

Vertical `fade-y`

Advanced `fade-xy fade-size-2xl fade-range-md`