Search code examples
htmlcssbackground-colorhighlight

Pen highlighter effect in css

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.

Highlighted pen effect

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 well with 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>
Solution

  • Not using a background color..no.

    Backgrounds extends to the edges of the element which are always rectangular (barring border-radius)

    In this case, a background image would probably the the optimal choice...BUT:

    You can achieve a similar effect using multiple text-shadows.

    A brief example.

    .green-highlight {
  text-shadow: 
     3px 0px 3px green,
    -3px 0px 3px green,
     6px 0px 6px green,
    -6px 0px 6px green;

}

.red-highlight {
  text-shadow: 
     3px 0px 3px red,
    -3px 0px 3px red,
     6px 0px 6px red,
    -6px 0px 6px red;
}

.yellow-highlight {
  text-shadow: 
    -3px 0px 3px yellow,
     3px 0px 3px yellow,
     6px 0px 6px yellow,
    -6px 0px 6px yellow;
}
    <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="red-highlight">Don't just write words. </span>
  <span class="yellow-highlight">Write music. </span
</p>

    It's just a matter of using as many shadows as you need to get the full effect you need,