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%);
}

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