Exploring CSS text-shadow Property

published:
2009.06.13
topics:
css

With the Safari supported CSS property text-shadow coming to Firefox 3.5, I thought I'd play around with the feature a bit more. Because shadows can be positioned, colored, and blurred — and because you can do multiple shadows — they actually let you do more that just create shadows. You can create programmatically blurred copies of text. You can create outer glows. You can create pseudo-3D effects. Playing around with what was technically possible, I did discover a few interesting things. None of the examples below are mean to be beautiful from a design perspective. They are more about exploration of the technology.

The Examples

Make the text color the same as the background color for "knocked out" text, and do multiple shadows for "3D" text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-one {
    color: white;
    text-shadow: 1px 1px 0 black, 2px 2px 0 black;
}

By negatively offsetting the text, and then pushing the text's shadow back where the text should be, you can create text that seems to be unselectable. Also, I set the CSS here to overflow: scroll; to show that text shadows in Firefox 3.5 (as of beta 999) affect the width of their container:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-two {
    text-indent: -999em;
    text-shadow: 999em 0 0 red;
    overflow: scroll;
}

In Safari, text-shadows are the same opacity as the text they shadow. Text with CSS set to color: transparent; doesn't show up at all. Firefox doesn't do this, which actually lets you make text that turns invisible when you select it:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-three {
    color: rgba(0, 0, 0, 0.1);
    text-shadow: 1px 1px 1px green;
}

And finally, some fun with text that is blurred/out of focus until you mouse over it. A little extra pizzaz added in Safari which supports animated CSS transitions:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-four {
    color: blue;
    text-indent: -999em;
    text-shadow: 999em 0 8px blue;
    overflow: hidden;
    -webkit-transition: text-shadow 0.25s linear;
}

#shex-four:hover {
    text-shadow: 999em 0 0 blue;
}

Update: Even Cooler Demos!

If you are interested in more exciting uses of the CSS text-shadow property, then be sure to check these out: