Highlight text effects using CSS

This tutorial provides the steps to add a low highlight text effect in any text using pure CSS.

Preview:

STEP 1. The markup

Although, it will work with any class. It is recommended to have a div/container to keep the alignment relative.

Here, we are going to highlight our <h1> for our post title. The markup will look like this.

<div class="post-heading">
<h2>Highlight text effects using CSS</h2>
</div>

Remember, if you have too many content like Post info, date, author name align differenltly, positioing of the H1 will position them all. You can always individually make the alignment.

STEP 2. The CSS

We can use background or box-shadow inset value ( see Hyperlink – a Tag Design in HTML) that uses the similar css effect.

.post-heading {
    position: relative;
    text-align: center;
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.post-heading h1 {
    display: inline;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%,
            rgb(255 69 0) 65%);
    box-shadow: inset 0 -0.5em 0 rgb(255 203 86);
}

It is recommended to use only one to highlight it or match the color for both.