Custom Text Underline & Highlighted Text in Webflow
There are many ways you can direct your visitors attention to specific parts of your designs.
Methods such as using strong colors, interesting layouts and interactions will help you guide the eyes of your viewers.
But what if you have a heading containing a certain word that you want to be highlighted?
That’s where custom underlines and complete background highlights really come in handy.
There are lot’s of examples of this effect on various websites. Just take a look at these ones.
This guide will show you how you can a similar effect on your own text elements and / or headings in Webflow.
Highlighted words in a sentence
Start off by dragging your text element onto the Webflow canvas.
Select the word you want highlighted and click the little brush icon to make it a span.
A span is simply a part of a sentence of which design should differ from the rest of the text
Now we have the ability to only style this word separately from the rest of the sentence.
I’ll make it its own class in order to reuse it on other places in my design. I’ll name it heading-highlight.
I’ll give the word a darker blue background.
Okay, there we go. Cool. But isn’t the contrast between the word and the background a bit too small? Let’s make the text white.
Okay, better. But wouldn’t it look good with a bit more space on the sides? Let’s add some padding.
That’s better. The word “highlight” is a bit awkward with the g’s that goes all the way to the bottom, but otherwise it looks kinda cool.
Lets proceed by making a an underline instead.
The basic underline
Creating an underline on a certain word in a heading is fairly simple.
You would think you could use the built in “underline” setting on a span.
This is not the case though, since there aren’t any way of styling it yourself. It simply inherits you overall text settings.
Creating the underline
I’ll start off by inserting a new heading in my project.
Then I’ll select the word I want underlined and make it a “span”, similar like the highlight.
Now we can give it a background color. But we’ll not use the “backround color” setting. Instead we’ll select the “linear gradient”.
Let’s change the lower color to blue, and set the upper color to transparent.
This looks cool, but we want a really hard gradient in order to make the illusion of an underline.
Let’s set another set the transparent “gradient point” to around 50%, and add a new “gradient point” with the same blue color at 50% as well.
That looks good. Let’s play around with the padding settings to make it look a bit better.
And we’re done. Looks good, doesn’t it?
If we want, we could play around with the line heights of the header and maybe add an interaction that animates the underline on hover or something similar. But that’s for another time.
Enjoy and have a very nice day.
/Robin G 🤙
