Pen highlighter effect in css

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:

screenshot of highlighted text

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.


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

enter image description here

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>

Using CSS only, the closest you can get to your screenshot is something like this :

.green-highlight, .pink-highlight, .yellow-highlight {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-left: 3px;
 }

.green-highlight {
    background: #99FFCC; /* Default color, all browsers */
}

.green-highlight::selection {
    background: #99CCCC; /* Selection color, WebKit/Blink Browsers */
}

.green-highlight::-moz-selection {
    background: #99CCCC; /* Selection color, Gecko Browsers */
}

.pink-highlight {
    background: #FFCCFF; /* Default color, all browsers */
}

.pink-highlight::selection {
    background: #FF99FF; /* Selection color, WebKit/Blink Browsers */
}

.pink-highlight::-moz-selection {
    background: #FF99FF; /* Selection color, Gecko Browsers */
}

.yellow-highlight {
    background: #FFFFCC; /* Default color, all browsers */
}

.yellow-highlight::selection {
    background: #FFFF66; /* Selection color, WebKit/Blink Browsers */
}

.yellow-highlight::-moz-selection {
    background: #FFFF66; /* Selection color, Gecko Browsers */
}
<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>

If that's not close enough, I'm afraid you have to use images.

Tags:

Html

Css

Background Color

Highlight

Recent Posts