Faux Font Outline

29 February 2012

I was asked to replace an image menu on a clients website with a cufon or font-face version. The client was aware I couldn't reproduce the gradient overlay and that it would look different than it did before, but just plain white text on a light background wasn't very clear. So I tried to replicate the border/outline, and came up with this little CSS trick:

nav a {
    font-family: 'customfont', verdana, arial, sans-serif;
    color: #FFFFFF;
    font-size: 120px;
        2px 2px 0px #000,
        -2px -2px 0px #000,
        2px 0px 0px #000,
        0px 2px 0px #000,
        -2px 0px 0px #000,
        0px -2px 0px #000,
        2px -2px 0px #000,
        -2px 2px 0px #000

As you see in the demo, a softer "anti aliased" border is also possible. It takes a lot more code though:
.softshadow {
  font-family: 'Sansita One', cursive;
  font-size: 120px;
  color: #FFFFFF;
        1px 1px 0px #F0C,
        -1px -1px 0px #F0C,
        1px 0px 0px #F0C,
        0px 1px 0px #F0C,
        -1px 0px 0px #F0C,
        0px -1px 0px #F0C,
        1px -1px 0px #F0C,
        -1px 1px 0px #F0C,
        2px 2px 1px #F0C,
        -2px -2px 1px #F0C,
        2px 0px 1px #F0C,
        0px 2px 1px #F0C,
        -2px 0px 1px #F0C,
        0px -2px 1px #F0C,
        2px -2px 1px #F0C,
        -2px 2px 1px #F0C

Browser support for css-textshadow

You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!


  1. Gravatar


    06 December 2012

    Thanks for the comment, Phil. I added a compatibility chart for the text-shadow property. All other properties are supported in all browsers.

  2. Gravatar

    Phil Did,

    06 December 2012

    I find your tutorial interesting but it would be nice to tell about browser support

  3. Gravatar


    03 November 2012