Poppin’ Headine

A layered text shadow that helps pop text off the screen.

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:

  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;
Categories CSS

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment