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.

Answer 1

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 are highlighted 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.