CodePen Embed - CSS marker pen effect

<h1>CSS marker pen effect</h1>

<p>There are various suggestions out there on how to achieve a <span class="yellow">marker pen highlight effect</span> on text with CSS. This is how I think the effect is best achieved.</p>

<p>With different CSS classes, you can also control <span class="pink">different colors</span> of the marker pen.<br>
  Create your own favorite!</p>

body {
  font-size: 16px;
  font-family: sans-serif;
}

span {
  padding: .1em .4rem 0 0;
  margin: 0 -.4rem 0 0;
  border-radius: 1rem .125rem 1.125rem .125rem;
}

span.yellow {
  background-image: linear-gradient(to right,
    rgba(255, 254, 55, .4), 
    rgba(255, 254, 55, .8) 20%, 
    rgba(255, 254, 55, .2));
}

span.pink {
  background-image: linear-gradient(to right, 
    rgba(255, 110, 199, .4), 
    rgba(255, 110, 199, .8) 20%,
    rgba(255, 110, 199, .2));
}

This Pen is owned by Simon Sandgren on CodePen.

See more by @simonsandgren on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.