Two-Color Three-Dimensional Blocks and Text

We can use multiple text-shadow and box-shadow values to create a three-dimensional look to blocks or text, like this screenshot of David DeSandro's footer. However in that example, the "three dimesional" part is a solid color.

By alternating colors back and forth in the "stacking order" of our box or text shadow declaration, we can simulate a more three dimensional / lighted effect.

text-shadow:   1px 0px #eee, 0px 1px #ccc,
               2px 1px #eee, 1px 2px #ccc,
               3px 2px #eee, 2px 3px #ccc,
               4px 3px #eee, 3px 4px #ccc,
               5px 4px #eee, 4px 5px #ccc,
               6px 5px #eee, 5px 6px #ccc,
               7px 6px #eee, 6px 7px #ccc,
               8px 7px #eee, 7px 8px #ccc,
               8px 8px #eee;


Reference URL


  1. Bakaburg

    Crazy people….

  2. Manuel

    Nice effect, thank you =)!

  3. Rikudo Sennin

    I can’t wrap my mind around this one, how does it work?

    • Rikudo Sennin

      PS: I made a PHP function to automatically make it happen (very primitive and doesn’t check for errors) :)

      function threeDtext($color = array(238,238,238), $size = 10, $smooth = true) {
              $secondColor = array($color[0] - 24, $color[1] - 24, $color[2] - 24);
              echo 'text-shadow: ';
              for($i = 1; $i <= $size; $i++) {
                  echo $i;
                  echo 'px ';
                  echo $i+1;
                  echo 'px ';
                  echo ($smooth) ? '1px ' : null;
                  echo "rgb({$color[0]},{$color[1]},{$color[2]}), ";
                  echo $i+1;
                  echo 'px ';
                  echo $i;
                  echo 'px ';
                  echo ($smooth) ? '1px ' : null;
                  echo "rgb({$secondColor[0]},{$secondColor[1]},{$secondColor[2]})";
                  echo ($i == $size) ? ';' : ",\n";
  4. Jeff Simeon
    Permalink to comment#

    I did something a bit more involved using {LESS}. You can check it out here:

    Much more complicated than the example above, but {LESS} makes it easier.

  5. matt
    Permalink to comment#

    If you play with transparency and some big numbers you can manipulate this to do some inner-glow style effects.
    Be warned this appears to be a bit volatile so continue at your own risk – this appears to be a bit memory heavy so be ready to force quit youre web-browser… (also dont use your coding program’s preview mode as it may cause it to crash).

    font-size: 500px;
    text-shadow: 0px 0px 0px transparent, 0px 1px 300px #000,
                 2px 1px 4px #fff, 1px 2px 5px #000,
    	     3px 2px 5px #888, 2px 3px 5px #000,
    	     4px 3px 5px #777, 3px 4px 5px #000,
    	     5px 4px 5px #666, 4px 5px 5px #000,
    	     6px 5px 5px #eee, 5px 6px 5px #000,
    	     7px 6px 5px #ddd, 6px 7px 5px #000,
    	     8px 7px 1px #ccc, 7px 8px 5px #000,
    	     8px 8px 1px #fff;
    text-decoration: underline;
    text-transform: uppercase;
    font-stretch: extra-condensed;
    font-weight: bold;
    color: transparent;

    doesn’t seem to work the same across the browsers but I thought it was interesting enough to share…

  6. Sam Iso
    Permalink to comment#

    It’s cool but didn’t work on Google chrome 21.0

    Permalink to comment#

    3d txt shadow:
    text-shadow: 0px 1px 1px #ddd,
    0px 2px 1px #d6d6d6,
    0px 3px 1px #ccc,
    0px 4px 1px #c5c5c5,
    0px 5px 1px #c1c1c1,
    0px 6px 1px #bbb,
    0px 7px 1px #777,
    0px 8px 3px rgba(100, 100, 100, 0.4),
    0px 9px 5px rgba(100, 100, 100, 0.1),
    0px 10px 7px rgba(100, 100, 100, 0.15),
    0px 11px 9px rgba(100, 100, 100, 0.2),
    0px 12px 11px rgba(100, 100, 100, 0.25),
    0px 13px 15px rgba(100, 100, 100, 0.3);

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.