In a word, ”yes”.
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:
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-filterwill not apply to the newly created space.
- Everything under the “effect layer” will be unselectable/unclickable.