Creating Text Outlines in CSS

Creating outlines for text can be a very interesting problem to tackle when making a website. If you do any research, you’ll likely find that google points you to w3c schools for the text-outline property. There you will find out that (as of 10.27.2011), that CSS 3 property is not currently supported in any browsers.

I reached that point and started researching unorthodox ideas on the matter and didn’t find anything directly relating, but did find one really great site using multiple shadows to do offset shadows (really neat stuff I might add). I had no idea you could put multiple shadows on a single text object! Then it occurred to me, I could apply multiple blurred shadows overlayed to reduce the feathering enough that it would look like a solid outline. Sure enough, it worked! Here’s how you do it.

In your CSS item, let’s add some lines here…​

And that should do it! Add that class to whatever text you’re using and you should have nicely outlined text.

Category:CSS