Clipping / masking in CSS?

Tell us what’s happening:
Hi guys!

I did this landing page in Photoshop and all day I’ve been struggling to find a solution to implement the overlapping text so that it can also be responsive. Please note that I don’t have too much experience with CSS yet.
Here is what I did:

  • For smaller than 768px I was thinking to add the whole text on the image. For more than 768px, I managed to put a gradient on the text but it is not responsive, of course.

  • I added blending modes on the black text, but obviously there is nothing to make white from 2 dark images :slight_smile:

  • I tried to find a way to have the text in svg format, so I had 2 svg overlapping, one black and one white (with position absolute). Then I tried to figure out how to clip the white text to the image (like I did in Photoshop) and then to move the blkack svg to the back of the image. I think this way it can he responsive but I don’t know how to implement it.

Can anyone help me? The final solution that I have now is to leave everything a single image, as the one I uploaded here…but I’m not happy with this result.

Thank you very much!