How to add highlight text effect

We were looking to add a cool highlight text effect for some of our clients.
So I took to the css streets to find a really simple solution.

There are many ways to achieve cool results, but here are the two I favoured the most.

1. Add Span Class to the text + a snippet of CSS

<span class="half_background">Website Alchemy are the best!<span class="half_background"</span>

Here is the CSS to add:

.half_background {
  background: linear-gradient(to top, rgba(150,209,167,0.5) 30%, transparent 40%);
}

And here is the result!

Website Alchemy are the best!

2. Add Span Class <mark> to the text.

This is more of a generic highlight effect and works without any need to CSS to be added anywhere.

Here is the SPAN class to be added to the HTML of your text.

<mark>This text is nicely highlighted!</mark>

Here is the result!! This text is nicely highlighted!