We’ve been exploring the basics on how to use CSS3 shadows: box-shadow and text-shadow. Today we are going to improve our skills and will look into how to build some amazing text-shadows.

Some of the ideas for shadows, I found in various tutorials for Photoshop — and I was interested whether I can achieve similar effects by using just text-shadow.

Internet Explorer and Windows 8

To try all these samples yourself and express your creativity with the text-shadow, try downloading Internet Explorer 10. All mentioned techniques will also work with metro style apps for Windows 8 built using html and javascript. May The Shadow be with you!

Arcade Love

In our first sample we will try to draw some cool embossed text. We will start with a simple lime color text:

color: hsl(80, 70%, 55%);

Next let’s add some embossed effects by adding few shadows with 1px diagonal offset (note how the shadows color is defined comparing with the text color!):

Color Happiness

In the second sample we will reuse some ideas of the first one: we a going to build multiple colorful substrates making a pyramid of them. We will start with a very simple pink text:

color: hsl(330, 100%, 50%);

First of all let’s make it embossed. This time our “shadow” looks to the bottom and is really small, so I can reduce a number of applied rules by omitting intermediate 1px offsets — but on case of diagonal shadow such approach will result an aliasing effect. Also I will add some blurring to soft the transition to the next substrate:

The next step is to contract the shadows. By using contraction you can reduce the shadow to just some pieces of original symbols (it also depends on the font, font size and other attributes). As a result you will get a ragged shadow effect. Also note that as diagonal offsets and spread-distances differ for each of the shadows as a result we get a light twisting effect:

Cream Cake

In the fourth sample we will build a cream-text effect for some cake. Just text:

color: hsl(35, 100%, 30%);
background: hsl(35, 60%, 80%);

Let’s start with blurring. I added two shadows: the first one (upper) is made with the same hue-value as the text, but with less saturation, and the second one (lower) is more blurred, more lighted and half-transparent and I also moved its hue-value to the red:

Now let’s add some cream-color substrate (the hue-value is moved to the yellow and the lightness is increased):

text-shadow: ...
-1px 1px 2px 7px hsl(45, 60%, 95%);

On the next step we should add some volume to the substrate: I added a new shadow with diagonal offset of the same color as text but less saturated. Note that this shadow is less expanded than the substrate (4px vs 7px):

text-shadow: ...
-3px 3px 1px 4px hsl(35, 70%, 30%);

And one last step: blurring substrate to soft the transition to the background:

Plastic

I was playing with the last one sample thinking what I can do on top of it… As in many other samples final results depends on both: the text itself (size, font and so on) and applied shadow effects. In my fifth sample I’m using the CabinSketch font. So here is what we have — it is just text without any special effects:

color: hsl(65, 60%, 20%);
background: hsl(65, 60%,95%);

First of all I added some blurring around the text (note that the shadow is lighter than the text and as a result the text looks brighter and more saturated):

text-shadow: 00 3px 2px hsl(65, 60%,75%);

Next let’s add some outlining with blurring effect (note that I’m using expansions and decreased lightness):

Now the most interesting step — actually I don’t need the full outlining (substrate) but only some it’s pieces. To hide excess details I will draw few shadows on top of the substrate (note that these shadows are less in size, but have bigger diagonal offsets):

Painting

The following two samples will open for you some technics on how to use the transparency. Think on it: how would you use the text-shadow to draw something inside the text? Actually you can’t use the text-shadow to draw inner shadows. All the shadows you apply to the text are composed into a stack and are drawn one on top of another, and the text is drawn on top of all of them. So you need to make the text to disappear somehow… and to make it happen you can just make the text transparent!

color:
transparent;
background: hsl(0, 75%,45%);

Now the way is clear. Note that I’m going to draw with the white color (so the only thing that really matters is the 100% lightness). To draw something inside the text just decrease the size of shadow:

Up & Down

And the final sample! I’m going to continue playing with transparency. I will start with white text (I just have selected it to make visible):

color:
transparent;

First of all let’s add a classic 3d-text effect (you can play here with the transparency). Note the increased lightness-value in the middle shadow — I found it to be a nice way to emphasize the volume (try to increase the lightness to make it more visible):

Note

The ‘text-shadow’ property discussed in this article is defined in the CSS3 Text module which is currently in the Working Draft status. Meanwhile it seems to be quite stable it still can change in details.

Spread-distance value for text-shadows is currently defined in the ED for css4-text.