How to Get Craft-Style Highlighting Using CSS
Craft is really a beautiful app. Everything feels pixel perfect and it is a testament to how beautiful and fast a native app can be when compared to a web app.
One of the cool things Craft has is a fancy style of highlighting. It overlays a gradient on top of the text. Here's what it looks like:
Is it better than standard highlighting? Probably not. I could make an argument that it might be worse because it's easy to skip over while skimming a page.
Does it look cooler? You betcha!
So I wanted to see how to do that using CSS and I finally figured it out. Here's the code:
.rm-highlight {
background-image: linear-gradient(179deg, #ff00c9, #005aff);
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba (0,0,0,0.0001);
color: transparent;
-webkit-box-decoration-break: clone;
}
You have to add all of that because the "-webkit-text-fill-color" part makes it so that Safari browsers can see it. For some reason it renders things different. Go figure.
You can change the hex colors and the direction to make it look however you want.
It actually works super well in Roam and gives it your highlights kind of a cool and unique look.
Again, it's sometimes harder to see than a standard highlighter style, but it looks cool.
Hope this gives you something fun to play around with! Thanks for reading.