CSS Tricks – Create CSS Outlined Text using CSS text-shadow Property

Here’s a neat little CSS trick that you can use to create CSS outlined text effects using the CSS text-shadow property. While there is no built-in CSS outlined-text property, you can easily create your own outlined-text style in your CSS style sheet. This can be accomplished using one of the other built-in CSS3 properties, namely the CSS text-shadow property. The neat thing about the CSS text-shadow property is that you can apply any number of shadows to any text element. We can use this ability to our advantage to create a text outline. The idea is pretty simple actually. You basically create multiple narrow shadows all the way around the characters. These shadows can be any color you like. They may also be any thickness you like. Though thinner outlines tend to work best to avoid any visible gaps, too much fuzziness, and to help keep the number of shadows needed to a minimum. The simplest version of this effect is to create four shadows, each offset to each of the four corner directions, top-right, bottom-right, top-left, bottom-left, and each of the primary directions, top, right, bottom, left.

The CSS3 text-shadow property is pretty simple to use. You can specify any number of shadows with each separated by a comma. Each shadow is specified by a horizontal offset, vertical offset, blur (optional), and color (optional). The color may be in any CSS color format including Hex, RGB, RGBA, HSL, HSLA or the predefined browser color names. One pitfall to avoid is to remember that you only separate each full shadow with a comma. You do not use any commas to separate any of the individual attributes of any single shadow. Then of course end the entire text-shadow property with a trailing colon.

Here’s a simple example of a custom CSS Outlined Text style named: outlined-text-firebrick

.outlined-text-firebrick {
    text-shadow:
        2px 2px firebrick,
        2px 0px firebrick,
        2px -2px firebrick,
        0px 2px firebrick,
        0px -2px firebrick,
        -2px 2px firebrick,
        -2px 0px firebrick,
        -2px -2px firebrick;
}

And here’s an example of what such a custom CCS Outlined Text style looks like in use.

CSS Styled Outlined Text in Firebrick

Custom WordPress Web Site Development

Contact Us Today for custom WordPress Web Site Development if you have an aging static HTML Web site and would like to upgrade to a new custom designed WordPress based site with a built in content management system, blog, SEO and more!