Streaming live at 10am (PST)

How to Create Text With Offset Background

Hello Webflow Community, I am wondering how add offset background to text. I want it to look like the image below.


I know how do do it with a single line, but I have not found a way to make it responsive and work on multiple lines. A website that does this very similarly to what I want is:

Any help would be greatly appreciated. Thanks again!

Hi Trevor, welcome to the forum :webflow_heart:

You can actually copy the way they did it… which is pretty nice and I didn’t knew it was possible.
What they did, is create a <span> inside the H1 headline, and give that span the background properties. This way the background stays relative to each line.
Here is an example in Webflow:

And a clonable link:

1 Like

Thanks, that works exactly like how I want! Have a great rest of your day!

1 Like