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