How to make text background same as parent background gradient?


Hope you all are doing well, I’ve been working on a website for quite a while now and simlpy cant finish the hero section. The problem is that i want to have gradient color text thats opposite of hero background. I was able to make text color gradient, but there is a lot of alignment issues. I set the text block to use 100% vh and 100% vw and have absolute position and set its background same as the hero. Now there are problems with alignment. I need to have 3 of those text blocks. Also obviously text gradeint needs to be oppposite as hero background on all resolutions.

Here the read only link: Webflow - gymbros

This is what it should look like:

Any help would mean a lot.


This is actually really cool. I had never thought to do this purely with CSS before and it’s totally possible!

You can actually do this (at least) two different ways. One would be to just add more lines of text, make them text-align:justify; and use &NBSP; (Shift+Space for non-breaking Spaces) to shift each line to where you want (since I don’t think Webflow supports <pre> or you could do that in an HTML embed… but I think <pre> is not best practice anymore?)

Anyway, here is the result I got, with BOTH ways… Either all the text in a Justified H1 OR having multiple Justified H1s… For SEO (if you care, some people don’t) you shouldn’t have more than one H1, but also Google is smart enough to notice that if all 3 H1s are adjacent and above the fold, they should be treated as one.

Single H1:

Multiple H1:

You will have to adjust the text sizes and gradients for each viewport to really make it look great.

Really cool, thank you for showing me something new!

Thank you so much, I’ve been strugling with this for a few days now. You are a life saviour. I used the first method and it worked! Have a great day!