I'm trying to set up an effect like Telegram's chat scrolling, where there is a global gradient positioned relative to the screen (fixed), and elements vary in color according to their vertical position on the screen.
It should look something like this:
How can I achieve this in an efficient and flexible way? I considered these options:
- Using
background-attachment: fixed
and having giving all items the same background-image. - Using
clip-path
in some manner (although I have never used this property before).
Would these work? Is there a better way?