A Beautiful Site

A clever way to style the <mark> element

I was checking out the CashNotify app today and I noticed a beautiful style for highlighting text in their testimonials:

Screenshot of text highlighted with a fancy style

Most textual highlights use a boring rectangle background color, but this stands out and looks gorgeous. I was really hoping they were using a simple <mark> tag to accomplish this and was happy to learn that they are. The markup is as simple as it could be:

Just <mark>highlight</mark> it!

And the styles are simple too:

mark {
  background: linear-gradient(-100deg, hsla(48,92%,75%,.3), hsla(48,92%,75%,.7) 95%, hsla(48,92%,75%,.1));
  border-radius: 1em 0;
  padding: .5rem;
}

Another screenshot of text highlighted with a fancy style