7 cool examples with text shadows that you just can't miss

In the last two articles, we met with how shadows work in CSS3: box-shadow and text-shadow . Today, continuing the last topic, we will look at some more beautiful examples of using text shadows to achieve interesting effects.

Honestly, some ideas (two or three) were spied on in various articles on working with Photoshop - and I was wondering if you can achieve similar effects simply using text-shadow.

I should also immediately warn you that many examples (if not to say that most) may not work in your favorite browser, because it does not yet support the current text-shadow version with a spread-distance. But you can always set yourself a “Platform Preview” version of Internet Explorer 10 to test new features.
')
It is also worth noting that in almost all examples the definition of color through the hsl function is used - this turns out to be very convenient, since you can easily change the brightness and saturation without changing the hue, which is extremely useful when working with shadows.

Arcade love

In the first example, we will try to make bulging letters on a special substrate. And let's start with the fact that we will simply have the inscription of the color we need:

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

Then begins the consistent work on the formation of convex letters, due to the consistent imposition of shadows with a shift of 1px diagonally (pay attention to how the color of the shadow is set relative to the text color!):

 text-shadow: -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%); 

Here you can immediately add a few more strokes: a small white stroke around the text and blackout at the bottom of the shadow (this softens the transitions):

 text-shadow: 0 0 2px #fff, -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%), -2px -2px 2px hsl(80, 10%, 15%); 

Now, to make the substrate, you need to expand the shadow (the 4th parameter is the spray distance):

 text-shadow: ... -3px -3px 0 7px hsl(60, 10%, 65%), -4px -4px 0 7px hsl(60, 10%, 65%), -5px -5px 0 7px hsl(60, 10%, 65%), -6px -6px 0 7px hsl(60, 10%, 65%); 

Finally, so that the inscription along with the substrate landed neatly on the background, you need to add a little shading below:

 text-shadow: ... -7px -7px 4px 8px hsl(60, 10%, 40%), -8px -8px 6px 9px hsl(60, 10%, 55%); 

Final result

 color: hsl(80, 70%, 55%); text-shadow: 0 0 2px #fff, /*   */ -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%), /*    */ -2px -2px 2px hsl(80, 10%, 15%), /*  */ -2px -2px 0 7px hsl(60, 80%, 95%), -3px -3px 0 7px hsl(60, 10%, 65%), -4px -4px 0 7px hsl(60, 10%, 65%), -5px -5px 0 7px hsl(60, 10%, 65%), -6px -6px 0 7px hsl(60, 10%, 65%), /*   */ -7px -7px 4px 8px hsl(60, 10%, 40%), -8px -8px 6px 9px hsl(60, 10%, 55%); 

Color happiness

The second example is somewhat repelled by the first: we will try to make multiple color substrates in order to get a beautiful text pyramid. We begin again with the usual text inscription:

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

First of all, we will make the text bulge. Since in this case
the shadow will be directed strictly down and small, I save a little on the number of rules, skipping intermediate shifts (1px) - in the case of an oblique shadow, this will result in a ladder. Also, to soften the transition to the substrate, a blur has been added to the last rule:

 text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5); 

Next, we add an extended substrate with a shifted shade and draw an absolutely similar shadow for it (note that in addition to the vertical shift, only two parameters change - shade and shadow size):

 text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5), 0 3px 0 3px hsl(350, 100%, 50%), 0 5px 0 3px hsl(350, 100%, 25%), 0 6px 2px 3px hsla(350, 100%, 15%, 0.5); 

It remains to repeat the same technique several times, increasing the size of the substrate and shifting its hue in the right direction:

 text-shadow: ... 0 6px 0 9px hsl(20, 100%, 50%), 0 8px 0 9px hsl(20, 100%, 25%), 0 9px 2px 9px hsla(20, 100%, 15%, 0.5), ... 0 15px 0 45px hsl(90, 100%, 50%), 0 17px 0 45px hsl(90, 100%, 25%), 0 17px 2px 45px hsla(90, 100%, 15%, 0.5); 

Final result

 color: hsl(330, 100%, 50%); text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5), /* next */ 0 3px 0 3px hsl(350, 100%, 50%), 0 5px 0 3px hsl(350, 100%, 25%), 0 6px 2px 3px hsla(350, 100%, 15%, 0.5), /* next */ 0 6px 0 9px hsl(20, 100%, 50%), 0 8px 0 9px hsl(20, 100%, 25%), 0 9px 2px 9px hsla(20, 100%, 15%, 0.5), /* next */ 0 9px 0 18px hsl(50, 100%, 50%) 0 11px 0 18px hsl(50, 100%, 25%), 0 12px 2px 18px hsla(50, 100%, 15%, 0.5), /* next */ 0 12px 0 30px hsl(70, 100%, 50%), 0 14px 0 30px hsl(70, 100%, 25%), 0 15px 2px 30px hsla(70, 100%, 15%, 0.5), /* next */ 0 15px 0 45px hsl(90, 100%, 50%), 0 17px 0 45px hsl(90, 100%, 25%), 0 17px 2px 45px hsla(90, 100%, 15%, 0.5); 

Chocolate

The third example turned out almost by chance from experiments with alternating shadows. As in the previous cases, let's start simply by specifying the color of the label:

 color: hsl(20, 100%, 20%); 

The first thing I started with is a classic 3D inscription:

 text-shadow: -1px 1px 0 0 hsl(20, 100%, 16%), -2px 2px 0 0 hsl(20, 100%, 16%), -3px 3px 0 0 hsl(20, 100%, 16%), -4px 4px 0 0 hsl(20, 100%, 16%), -5px 5px 0 0 hsl(20, 100%, 16%), -6px 6px 0 0 hsl(20, 100%, 16%); 

Then I decided to gradually darken the shadow, removing the brightness, and push it, increasing the shift diagonally (this is the result of the ladder I wrote about above):

 text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%), -2px 2px 0 0 hsl(20, 100%, 14%), -4px 4px 0 0 hsl(20, 100%, 12%), -6px 6px 0 0 hsl(20, 100%, 10%), -8px 8px 0 0 hsl(20, 100%, 8%), -10px 10px 0 0 hsl(20, 100%, 6%); 

The next step is to add a reduction in its size to the shadow offset. Taking into account the overlap of shadows and font size - and in the reduced shadow, in the end, only hints of fragments of characters can remain - a slightly ragged effect is obtained. Also note that the steps for shifting the shadow and reducing its size are different; this has the effect of a slight twist:

 text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%), -2px 2px 0 -1px hsl(20, 100%, 14%), -4px 4px 0 -2px hsl(20, 100%, 12%), -6px 6px 0 -3px hsl(20, 100%, 10%), -8px 8px 0 -4px hsl(20, 100%, 8%), -10px 10px 0 -5px hsl(20, 100%, 6%); 

It remains to smooth everything out a bit (by the way, by varying the blur or color, you can insert intermediate bars):

 text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%), -2px 2px 2px -1px hsl(20, 100%, 14%), -4px 4px 2px -2px hsl(20, 100%, 12%), -6px 6px 3px -3px hsl(20, 100%, 10%), -8px 8px 2px -4px hsl(20, 100%, 8%), -10px 10px 2px -5px hsl(20, 100%, 6%); 

Having played a little over the small nuances, I got the following result ...

Final result

 color: hsl(20, 100%, 20%); text-shadow: 0 0 1px hsl(20, 100%, 18%), -1px 1px 0 hsl(20, 100%, 16%), -2px 2px 2px -1px hsl(20, 100%, 14%), -4px 4px 2px -2px hsl(20, 100%, 12%), -6px 6px 3px -3px hsl(20, 100%, 10%), -8px 8px 2px -4px hsl(20, 100%, 9%), -10px 10px 3px -5px hsl(20, 100%, 8%), -12px 12px 2px -6px hsl(20, 100%, 7%), -14px 14px 2px -7px hsl(20, 100%, 6%), -15px 15px 2px -8px hsl(20, 100%, 5%), -15px 15px 0 -8px hsla(20, 50%, 10%, 0.25); 

Cream cake

In the fourth example, we will try to achieve the effect of a cream-glaze inscription on a cake or something similar to such an inscription. Let's start again with simple text:

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

Let's start with a little blur lettering. For this, I added two shadows: the first (upper) is made in the same shade as the inscription, but in a less saturated color, the second (lower) is strongly blurred, shifted slightly towards red, slightly brighter and translucent (that is, it will overlap to everything that will be under it):

 text-shadow: 0 0 2px 1px hsl(35, 70%, 30%), 0 0 4px 4px hsla(30, 100%, 55%, 0.5); 

Next, we add a light cream base (the shade is shifted to yellow, and the color is made with high lightness):

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

Now we need to add some volume to the substrate, for which we set the shadow with offset, we make it the same color as the text itself, but a little less saturated. Please note that due to the fact that the label to the label is expanded more than the shadow to it (7px vs. 4px), it turns out that the last shadow is smaller than the substrate:

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

And the final touch: a similar background blur for a softer combination with the background:

 text-shadow: ... -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5); 

Final result

 color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%); text-shadow: 0 0 2px 1px hsl(35, 70%, 30%), /*    */ 0 0 4px 4px hsla(30, 100%, 55%, 0.5), /*  */ -1px 1px 2px 7px hsl(45, 60%, 95%), /*   */ -3px 3px 1px 4px hsl(35, 70%, 30%), /*    */ -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5); 

Plastic

So ... then I started to play with the latest example, thinking where this could all lead. And, specifically, as in many other examples, two components were important here: the font itself (in this example, CabinSketch) and shadow effects applied to it. Let's start again with plain text to track all the transformations:

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

First of all, let's add a slight blur around the label itself (note that the color of the shadow is noticeably lighter than the original label, so the last shadow with the applied shadow looks a bit richer and lighter:

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

Then you can add an additional stroke with a slight blur (note the increase in the size of the shadow and the reduced brightness):

 text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 9px hsl(65, 60%, 20%); 

It turned out to be a bit dark - one more should be inserted between the two shadows to lighten:

 text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 5px hsl(65, 60%,95%), 0 0 1px 9px hsl(65, 60%, 20%); 

Now the fun begins - in fact, I don’t need the whole stroke, but only parts of it. To hide the excess, several shadows of the background color can be drawn on top of it (note that these shadows are smaller than the stroke, but shifted to one side or the other more strongly):

 text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 5px hsl(65, 60%,95%), 6px 6px 4px 7px hsl(65, 60%,95%), -4px -6px 4px 6px hsl(65, 60%,95%), 0 0 1px 9px hsl(65, 60%, 20%); 

If necessary, you can add a few additional strokes to smooth the transition from stroke to shadow.

Final result

 color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%); text-shadow: 0 0 3px 2px hsl(65, 60%,75%), /*   */ 0 0 1px 5px hsl(65, 60%,95%), /*     */ 0 0 4px 4px hsla(65, 100%, 30%, 0.4), /*   */ 6px 6px 4px 7px hsl(65, 60%,95%), -4px -6px 4px 6px hsl(65, 60%,95%), /*   */ 0 0 1px 9px hsl(65, 60%, 20%); 

Painting

The following two experiments concern more work with transparency. Let's start with this task - how to do something with a shadow inside the text? In fact, there is no direct way, because for text-shadow, unlike box-shadow, there is no inset parameter. All the shadows you draw are lined up and drawn one on top of the other, and the text itself is always on top! The text seems to interfere ... Therefore, we must begin with removing the text. That's right, you need to make it transparent:

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

Now the road is cleared! Immediately I will say that you pay attention to this: we will paint in white, so the only thing that matters is the 100% luminosity. To make a stroke inside the text, it is enough to reduce the size of the shadow:

 text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75); 

Add a few more strokes, varying the transparency, shift and size:

 text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75), -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65), 1px 1px 1px -4px hsla(0, 60%, 100%, 0.65); 

To give shape and enhance the fill, you can add a general blurred (and partially transparent) shadow:

 text-shadow: ... 0 0 1px 2px hsla(0, 60%, 100%, 0.65); 

If you really want, you can add a couple of external strokes. The result is the following effect of the hand-drawn lettering ...

Final result

 color: transparent; background: hsl(0, 75%,45%); text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75), -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65), 1px 1px 1px -4px hsla(0, 60%, 100%, 0.65), /*   */ 0 0 1px 2px hsla(0, 60%, 100%, 0.65), /*    */ -3px -3px 1px 2px hsla(0, 60%, 100%, 0.25), 3px 3px 1px 2px hsla(0, 60%, 100%, 0.25); 

Up & Down

The final effect continues to exploit the transparency of the text :) Here we also start with a completely transparent text (I selected it to distinguish it from the background):

 color: transparent; 

First of all, we will make their text plain 3D text (you can additionally play around with transparency). Pay attention to a small jump in the lightness in the middle - it helps to make a small risk in the middle of the text (try increasing the lightness so that it becomes more noticeable):

 text-shadow: 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0); 

Now, to give a larger shape, I will add a shadow on top, in general repeating the shape of the source text:

 text-shadow: 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), ... 

Finally, similarly to the bottom, let's add the upper 3D shadow, but lighter and more transparent (to increase the sharpness, the uppermost shadow is made a little less transparent than the others):

 text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), ... 

Final result

 color: transparent; text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0); 

You can also play around with hues and saturation, for example, by making the bottom red and the top blue, or something else ...

Internet Explorer

To try it all yourself, do not forget to set yourself a “Platform Preview” version of Internet Explorer 10 . May the shadow be with you!