How to create a low highlight text effect in Squarespace

Aug 17

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Sometimes called a “half highlight”, this tutorial will show you how to create text that has a solid color behind only the lower half of it.

To create this effect in Squarespace, I actually use a linear gradient background!

This tutorial will show you how to create that gradient for your H1 text, and how to apply it to active links.

If you want to use it next to other text without creating a link, check out the older tutorial at the end of this post.

Here is the main code from the tutorial:

h1 *{
background: linear-gradient(to bottom, #fff 50%, #50bdb8 50%, #50bdb8 90%, #FFF 90%)
}
h1:hover *{
background: linear-gradient(to bottom, #fff 30%, #50bdb8 30%, #50bdb8 80%, #FFF 80%)
}

Sure active links are cool, but what about low highlight text in the middle of a sentence?

We can use bold and italic styles to make that magic happen. This example would change any bold h1 text to a gradient:

h1 strong{background: linear-gradient(to bottom, #FFF 50%, #50bdb8 50%)}

But there is ooooooone more thing to add. If that text effect is being used for bold or italic, you probably don't want the text to actually look bold or italic! So you have to reset that with code too.
Using that same example, above, we can set the font weight back to normal so the only thing about the text taht changes is the gradient color.

h1 strong{
background: linear-gradient(to bottom, #FFF 50%, #50bdb8 50%);
font-weight: normal!important
}

Italic text use the code name em and the font-style:italic so if we wanted to add a low highlight to only italic H1 text, and make it look un-italicized, this is the code you would use: