CSS-only highlighter effect

You can apply a “highlighter” effect to text using background gradients.

.highlight {
  background: linear-gradient(
      100deg,
      rgba(255, 221, 64, 0) 0.9%,
      rgba(255, 221, 64, 1) 2.4%,
      rgba(255, 221, 64, 0.5) 5.8%,
      rgba(255, 221, 64, 0.1) 93%,
      rgba(255, 221, 64, 0.7) 96%,
      rgba(255, 221, 64, 0) 98%
    ), linear-gradient(180deg, rgba(255, 221, 64, 0) 0%, rgba(
          255,
          221,
          64,
          0.3
        ) 7.9%, rgba(255, 221, 64, 0) 15%);
  border-radius: 0.125em;
  box-decoration-break: clone;
  padding: 0.125em 0.25em;
}

See it in action on Codepen.

Sign up for my newsletter

A monthly round-up of blog posts, projects, and internet oddments.