How can I make a UI element render below something that is above it in the hierarchy?

Hello and thanks for your time!

I’m making a scrolling parallax scene with the new UI, and have run into an interesting conundrum.

Here’s a reference image that should make what I’m about to ask more understandable:

I’ve got a static background (the sky and the sun), a foreground scrolling right to left (the sand dunes), and in between them a big rock, that also scrolls right to left, slightly slower than the dunes.

The issue is, I’d like the shadow to show up on top of the dunes, but behind the rock (which is behind the dunes). I’ve Googled around and asked ChatGPT for help, getting some vague ideas about trying to do it with shaders, but I’m inexperienced with them and am hoping there’s a simpler way to do this with a mask or something of the like. Does anyone have any insights or ideas that could get me started?