Fun with CSS text-shadow

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:

3D  shaded  

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 {
    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;
      -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;
  /* 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);
3D  shaded  

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

3D  glassy  

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!

3 thoughts on “Fun with CSS text-shadow

  1. Me…flame-baiting? Pshawww…

    First let me be clear…I totally dig your effects here. I’m just speaking of my sentiment re. the larger issue of Flash versus HTML5-CSS-Jquery, etc.

    The writing is on the wall. We agree on that. Flash is in retreat.

    But this feels like going back down the mountain 5 miles in order to start an ascent up a different route to the summit.

    And in the current landscape Flash has markedly superior penetration to HTML 5 (at least on the desktop)

    Yes…’s a mobile world now, yada..yada..yada.

  2. Flame-baiting me, Craig?

    It is close in functionality. The construction tools are not yet close in usability, stability, and cross-platform compatibility.

    Still, the writing is on the wall, ain’t it?

  3. Sweet. The new standards are coming around. I still don’t feel like HTML 5 is even close in functionality to Flash.