I’ve been playing with the text-shadow property in CSS3, and having a lot of fun with it. Did you know that modern browsers allow you to stack multiple drop shadows? Used creatively, this allows for all sorts of pure-css fun.

Here’s what we’re going to build today:

First, let’s understand how text-shadow works. It’s pretty simple.

text-shadow takes 4 parameters: X offset, Y offet, Blur, and color.

.simple {
    text-shadow: 5px 5px 5px black;
}

We can put multiple shadows by separating them with commas. Each shadow is drawn underneath its predecessors.

.double {
    text-shadow: 
    5px  5px  5px black,
    10px 10px 5px red;
}

If we use no blur factor at all, and repeat shadows a bunch of time, we can do something like this:

Note: This was tested on Safari/Mac… it should work in Chrome as well, your mileage may vary if using another browser.)

.woodblock {
    text-shadow: 1px  1px 0 white ,
                -1px -1px 0 white ,
                -1px  1px 0 white ,
                 1px -1px 0 white ,
                 2px  2px 0 white ,
                 3px  3px 0 peru ,
                 4px  4px 0 peru ,
                 5px  5px 0 peru ,
                 6px  6px 0 peru ;
}

From there, it’s not far to…

.outlined {
    padding: 0.2em;
    font-family: "Marker Felt", Georgia, serif;
    font-weight: bold;
    font-style: italic;
    letter-spacing: -4px;
    text-shadow: 
      -1px -1px 0    white ,
      -2px  0   0    white ,
      -1px  2px 0    white ,
       0    3px 0    white ,
       2px  2px 0    white ,
       3px  0   0    white ,
       2px -1px 0    white ,
       0   -2px 0    white ,
      -2px -2px 0    darkgoldenrod,
      -3px  0   0    darkgoldenrod,
      -2px  3px 0    darkgoldenrod,
      -1px  4px 0    darkgoldenrod,
       1px  4px 0    darkgoldenrod,
       3px  3px 0    darkgoldenrod,
       4px  1px 0    darkgoldenrod,
       3px -2px 0    darkgoldenrod,
       2px -2px 0    darkgoldenrod,
       1px -3px 0    darkgoldenrod,
       5px  0px 0    darkgoldenrod,
       5px  5px 0    darkgoldenrod,
       0px  5px 0    darkgoldenrod,
      -4px  2px 0    darkgoldenrod, 
      -4px  0px 0    darkgoldenrod, 
      -3px -2px 0    darkgoldenrod, 
       0px -4px 0    darkgoldenrod, 
       3px  6px 12px black
    ;
}

A little trickier this time: We’re going to alternate light and dark shadows. The light one will be offset 1px more to the right, the dark one 1px farther down. The overlap will give us a nice 3D effect.

.shaded {
    color: lightskyblue;
    font-style: italic;
    letter-spacing:-2px;
    text-shadow: 
  /* A non-offset shadow, for sharper-edged text. */
     0px  0px  0px lightskyblue ,
  /* Now we stack the light and dark layers, with offsets. */
     1px  0px  0px lightcyan ,
     0px  1px  0px lightblue,
     2px  1px  0px lightcyan,
     1px  2px  0px lightblue,
     3px  2px  0px lightcyan,
     2px  3px  0px lightblue,
     4px  3px  0px lightcyan,
     3px  4px  0px lightblue,
     5px  4px  0px lightcyan,
     4px  5px  0px lightblue,
     6px  5px  0px lightcyan,
     5px  6px  0px lightblue,
     7px  6px  0px lightcyan,
     6px  7px  0px lightblue,
     8px  7px  0px lightcyan,
     7px  8px  0px lightblue,
     9px  8px  0px lightcyan,
     8px  9px  0px lightblue,
    10px  9px  0px lightcyan,
     9px 10px  0px lightblue,
    11px  9px  3px darkgrey,
  /* Finally some actual shade, offset the other way. */
     9px 11px  5px grey,
     2px 18px  8px silver,
    -8px 26px 12px lightgrey;
    -webkit-transform: rotate(3deg);
}

More examples follow. Please look at the page’s HTML source code to see how it’s all done.

Feel free to let me know what you think in the comments section below, or pop me a tweet. And if you use some of these techniques in your code, do let me know!