So I’ve been playing around with CSS and scrolling lately and this latest demo popped into my mind while driving home. I remember seeing this effect where some text remained stationary in the viewport but changed colour as the user scrolled. I always assumed it required some Javascript wizardry but could it be done with CSS only?

In a word, ”yes”.

I looked around for existing solutions but the ones I found either used Javascript or a duplicate of the text targeted for changing colours. I was pretty confident we could use modern CSS and I was right.

The magic is done by the CSS property backdrop-filter which applies the selected effect(s) to everything behind it, much like Layer Effects in Photoshop. So the idea is to create an element with backdrop-filter applied to serve as a layer and have the text scroll behind it.

Here’s a video showing it in action:

And of course the Codepen:

See the Pen CSS-only colour-change for scrolling text (without duplicate text) by Joshua (@limshengming) on CodePen.

There are naturally some caveats:

  • The “effect layer” will change the background colour of everything it passes over. This may or may not be desired.
  • If the width of the “effect layer” increases after page load (e.g. by making the browser wider), backdrop-filter will not apply to the newly created space.
  • Everything under the “effect layer” will be unselectable/unclickable.