Last updated on:

# 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;``````

#### Example

1. Bakaburg

Crazy people….

2. 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);
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

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.

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…