Highlighting text with CSS

Highlighting text on a web page and making it appear like it was done with a highlighter pen, which is named a skeuomorphism ¹, can look like this:

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

It is done with CSS and nothing else. For the above example I used the approach of Stephen Lewis and changed opacity values slightly to get a more intense yellow background.

It requires a light background of the web page because of the translucent yellow color. Therefore you cannot use it for dark mode. For that case I added a media query and simplified the approach, so that at least you can highlight text in dark mode.

Here is the code:

mark,
.mark {
  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.2) 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;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0;
  display: inline;
}

@media (prefers-color-scheme: dark) {
  mark,
  .mark {
    background: rgb(255, 221, 64);
    border-radius: 0;
  }
}

There is another good approach by Max, which is standing out because of the step-by-step explanation Max is providing. However, the creative use of gradients with Stephen's approach looks more realistic to me.

---

1. Skeuomorphism involves designing digital interfaces that imitate physical elements, reducing the learning curve for unfamiliar interactions., Skeuomorphism, Megan Chan, Nielsen Norman Group ↩︎