Cool CSS Effects: Realistic Text Highlighting

With CSS, you can use the background property to make it look like text has been highlighted, but it doesn’t quite mimic how highlighting looks in real life. If you want to make your highlights appear more realistic, you can use CSS3’s linear gradients with the background-image property. This way the edges of the highlights appear faded and a lot more like the  highlights you might see on paper.


First, surround the text you’d like to highlight with span tags, and give the spans a class of highlight. Next you need to add some styling, which should look something like this:

  1. .highlight{
  2. background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
  3. }

And you’re done! One line of CSS and some small changes to your HTML is all it takes to achieve a realistic text highlighting effect.

Share and Enjoy !

0 0