Skip to main content Accessibility Feedback

Highlighting effect with CSS

I’ve always loved the look of text that looks like it’s highlighted.

Not sure what I’m talking about? Here’s an example of a highlighted sentence.

This is super easy to do with CSS. Add this to your CSS file, and add the .highlight class to a <span> around your text.

.highlight {
    background-color: #fff2ac;
    background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
}
<span class="highlight">My highlighted text.</span>

You could also add this effect to selected text using the ::selection pseudo-selector.

::-moz-selection,
::selection {
    background-color: #fff2ac;
    background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
}

🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips