CSS Transparent and Outlined Text

1 Comment on CSS Transparent and Outlined Text

For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly.

Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen:

See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) on CodePen.

The code above uses @supports to apply text-stroke when supported. If not supported it falls back to the (ugly) faux outline technique.

This is how it looks like in browsers that support text-stroke:

css-outlined-text

And this is how it looks like in browsers that don’t support text-stroke (note the ugly outline around the letter A):

css-outlined-text-fallback

Note: Unfortunately this technique does not work on emoji (cfr. Emoji Silhouettes and Emoji Outlines with CSS)

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

1 Comment

  1. Pingback: Emoji Silhouettes and Emoji Outlines with CSS | Bram.us

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.