For a recent project, I needed to “highlight” certain words in headlines. Just changing the font color wasn’t quite enough, so I decided to play around a little bit more — and I really liked the result!
This started off with a light gray shadow behind the letters, but it was causing a little “blurriness” since there wasn’t enough contrast.
Thankfully, a nice little white stroke around the letters was enough to really set it off.
But how do you do strokes around letters? With another box-shadow!
Here’s the code:
.poppin{
color: var(--brand-secondary); /* change this to the contrast color */
font-weight: 800; /* I used 800 just to make the font slightly more bold */
text-shadow: /* make the first 4 colors the same as your background (this is the "stroke") */
-2px -2px 0 #fff,
2px -2px 0 #fff,
-2px 2px 0 #fff,
2px 2px 0 #fff,
3px 3px 8px #002f3d30;
}