Published

File this one under “Silly Workarounds that work”. This is an ever-so-slight variation of CSS-Trick’s method.

There was some text that needed to be placed over an image. The problem was that while the text-color was fixed, the image colour wasn’t so there was a chance that you could have poor contrast between the text and the image.

The quick CSS workaround I used was to use text-shadow to add an outline (or stroke) like so:

.text-to-outline {
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

Hey, don’t judge me because it works. Play around with the value of the blur radius (set to 2px in the example) and the number of text-shadows applied.