CSS Text Outline

 153 total views,  2 views today

Here’s a quick tip for things like hero images with text over them or any other situation where you want to make your text pop a little rather than blending into the background.

Using text-shadow on your text can give the effect of it being outlined. This does work best on Arial type fonts and larger fonts. But it’s a handy trick to make the text stand out a bit.

<style>
    p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 5em;
        color: #ff0000;
        text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    }
</style>
<p>Outline Text</p>