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.