Low highlight css text effect with vanilla css

This is a really simple tutorial on how to create a low highlight css text effect with vanilla css. The trick here is to use the background-image css property rather than a background-color. First, let’s assume we have an h1 tag. We need to wrap each word or group of words that we want to highlight in a span tag, and give each of those span tags a class name of “low-highlight”:

<h1>
    Here <span class="low-highlight">is my</span> 
    highlighted <span class="low-highlight">text!</span>
</h1>

Then, we need to add the styles for the low-highlight class. The reason we need to use a background-image rather than a background-color, is because a background-image can have its height, width, and position manipulated. We cannot manipulate the height, width, nor position, of the background-color property. Ideally, we want a 100% width and a 30% height for our background image. Then we want to shift it down by 70%, so it covers the bottom portion of our text. All these combined will contribute to our low highlight css text effect. We can achieve this using the following:

.low-highlight {
    background-image: linear-gradient(0, yellow, yellow);
    background-size: 100% 30%;
    background-repeat: no-repeat;
    background-position: 0 70%;
}

Code explanation

We’re using a linear-gradient, but setting the degree angle to 0, and having the gradient go from yellow, to yellow. Effectively creating a solid background color. Unfortunately we cannot specify a solid color when using the background-image property, that’s why we need to use this linear-gradient hack.

Next we specify a background-size. The first value refers to the width. We want a 100% width so the background will stretch the entire width of the affected text. The second value refers to the height, which we want to specify as 30% so it only covers a small portion of the height of the text.

Then, we need to make sure our background is shifted down to cover just the bottom portion of our text. We achieve this by using the background-position property, where the first value refers to the x axis (horizontal), and the second value refers to the y axis (vertical). We don’t want to move it horizontally but we do want to shift it down (i.e. vertically), so we shift it down by 70%.

Having a background-repeat of no-repeat also ensures we just have one “copy” of the background image, rather than it repeating to cover the entire text (which defeats the purpose of this low highlight css text effect).

Design sites faster with Tailwind CSS

Want to go from zero to hero with Tailwind? Take the Tailwind CSS Zero to Hero course!