Pen highlighter effect in css

Question

I want to create a highlight effect that resembles a highlight made with a pen. i.e. it has wavy tops and bottoms and a rough start and end, like in this picture.

What's the best way to do this in CSS? Is there a way to do it without using background images? Also so that it works will line wraps.

Ideally the solution would take HTML like the below and make it look like the image.

<p>   <span class='green-highlight>So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>   <span class='pink-highlight'>Don't just write words. </span>   <span class='yellow-highlight'>Write music. </span </p> 

Answer 1

for a hyper realistic pen highlighter! Play with the background gradients for the intensity and with text-shadow to give it a washed effect.

span {     padding: 0.6em 13.7px;     line-height: 1.8em;     font-size: 23px;     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial; } span.highlight { font-weight: bolder; background: linear-gradient(104deg, rgba(130, 255, 173,0) 0.9%, rgba(130, 255, 173,1.25) 2.4%, rgba(130, 255, 173,0.5) 5.8%, rgba(130, 255, 173,0.1) 93%, rgba(130, 255, 173,0.7) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(130, 255, 173,0.3) 7.9%, rgba(130, 255, 173,0) 15%); padding: 0.6em 13.7px; -webkit-box-decoration-break: clone; margin: 0; border-radius: 7.5px; text-shadow: -12px 12px 9.8px rgba(130, 255, 173,0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1); }

<span class="highlight">Lorem Ipsum is simply dummy text of the printing and</span> <span>typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <span class="highlight">it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was<span>

Answer 2

I was looking for the best possible effect with pure CSS and found the one that Basecamp uses quite compelling. There was still room for improvement though.

Here is my improved version:

And here is the code:

mark {   margin: 0 -0.4em;   padding: 0.1em 0.4em;   border-radius: 0.8em 0.3em;   background: transparent;   background-image: linear-gradient(     to right,     rgba(255, 225, 0, 0.1),     rgba(255, 225, 0, 0.7) 4%,     rgba(255, 225, 0, 0.3)   );   -webkit-box-decoration-break: clone;   box-decoration-break: clone; }

Inside this text some words <mark>are highlighted</mark> and some aren’t.

If you are interested in how this works:

I wrote a tutorial about how the marker pen highlighter effect is achieved.