Streaming live at 10am (PST)

Inline half height highlighted text

Hey guys, full on webflow and code newb here, is there anyway to create text with the styling in the attached image?

example

Thanks
Iain!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

same question here. Do you solve that?

Not when I was trying to do it myself! But yeah, I figured out a way using CSS.

You create your text, then add a span to the text you want highlighted, give the span class the name “half_background” (or whatever you want it to be, just make sure the naming is consistent in the CSS)

Then in the custom code for the page you’re on, add the following

.half_background { background: linear-gradient(to top, #FF0000 50%, transparent 50%); }

Save, then publish.

As with any custom code, you’ll only see it on the published website, not in the Webflow designer. Hope that helps you, I can do a clonable site if that would be a little clearer for you.

1 Like

https://preview.webflow.com/preview/iains-dandy-project?utm_medium=preview_link&utm_source=dashboard&utm_content=iains-dandy-project&preview=98240b7cbe4067f35db9dd144faaa40d&mode=preview

Without custom code: http://broplayground.webflow.io/inline-half-height-highlighted-text

Read Only: https://preview.webflow.com/preview/broplayground?utm_medium=preview_link&utm_source=dashboard&utm_content=broplayground&preview=199fd3556254ef8e33b2beec09ee2264&mode=preview

1 Like

That’s a really smart alternative! Thanks man!

@Iain_Brady no problem :v::blush:

Thank you! I was struggling with this for the longest. Had to learn how to add custom code with the embed HTML block.

So I’m not sure if it was something that I was missing, but I found a way to do this that doesn’t involve any code.

Add a text box and create your text, highlight it and wrap with span. Add a colour background and then create a gradient. You can drag the gradient to be a hard line or a soft line, depending on your preference.

sample highlight