Css background clipping

Hi im trying to see if theres a css method for creating an effect similar to what ive shown in the attached image. I though

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

Might do it but i see it just shows the transparent white background of the dive immediately below it through - Any thought how i could achieve this


I’m not sure what effect you see there. I just see a background image with a div on top.

You mean something like this? A blend mode will do it.

Credit: I had bookmarked this in the past and could reference it. https://css-tricks.com/css-techniques-and-effects-for-knockout-text/


Ah, yes, I see now…

Yes Dave thanks - exactly- Appreciate the help

1 Like

Yes I was just going to post a similar demo but Dave beat me to it :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.