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

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

Honestly, some ideas (two or three) were spotted in various articles on working with Photoshop - and I was wondering if it is possible to achieve similar effects simply using text-shadow.

I should also warn you right away that many examples (if not to say that most) may not work in your favorite browser, because it does not yet support the current version of text-shadow with spread-distance. But you can always put yourself a “Platform Preview” version of Internet Explorer 10to test new features.

It is also worth noting that almost all examples use color definition through the hsl function - this is 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 convex letters on a special substrate. And to begin with, we just have the inscription of the color we need:

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

Next, the sequential work begins on the formation of the convexity of the letters, due to the consistent application of shadows with a shift of 1px along the diagonal (pay attention to how the shadow color 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 darkening 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 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, in order for the inscription, along with the substrate, to gently land on the background, you need to add a little shading at the bottom:

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 colored substrates in order to finally get a beautiful text pyramid. We begin again with the usual text caption:

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

The first thing we do is make the bulge out of the texts. 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 inclined shadow, this will result in a short flight of stairs. Also, to soften the transition to the substrate, blur is 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, add an expanded substrate with a shifted hue and draw an absolutely similar shadow for it (note that in addition to vertical shift, only two parameters change - the hue and size of the shadow):

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 more times, increasing the size of the substrate and shifting its shade 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 was obtained almost by accident from experiments with alternating shadows. As in previous cases, let's just start by setting the color of the inscription:

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

The first thing I started with is the 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%);

Next, I decided to gradually darken the shadow, removing the brightness, and push it apart, increasing the diagonal shift (in this case, just 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 shadow size to the offset. Given the overlap of the shadows and the font size - and in the long run, only hints of fragments of characters can remain in the reduced shadow - a slightly torn effect is obtained. Also note that the steps of shifting the shadow and reducing its size are different, this gives the effect of a little twisting:

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 things out a bit (by the way, by varying the blur or color, you can insert intermediate strips):

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 more over 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 creamy-glaze inscription on the 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 of the inscription. To do this, I added two shadows: the first (upper) is made in the same shade as the inscription, but with a less saturated color, the second (lower) is very blurry, shifted slightly towards red, slightly brighter and translucent (that is, it will overlap for 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 creamy substrate (the shade is shifted to yellow, and the color is made with increased lightness):

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

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

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

And the final touch: similarly blur the substrate 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 playing around with the last example, thinking where all this could lead. And, definitely, as in many other examples, two components were important here: the font itself (in this example, CabinSketch) and the shadow effects applied to it. Let's start again with simple text to track all the transformations:

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

First of all, let's add a little blur around the inscription itself (note that here the shadow color is noticeably lighter than the original inscription, so the last one with the shadow applied looks a bit more saturated and lighter:

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

Next, you can add an additional stroke with a little blur (pay attention to the increase in the size of the shadow and low lightness):

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

It turned out a bit dark - you need to insert another shadow between two shadows to lighten it:

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 do not need the whole stroke, but only parts of it. To hide the excess, you can draw several shadows of the background color on top of it (note that these shadows are smaller in size than the stroke, but shifted to one side or another 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 next 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 stacked and drawn one on top of the other, and the text itself is always on top! The text, as it were, gets in the way ... Therefore, we must start by removing the text. That's right, you need to make it transparent:

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

Now the road is cleared! I must say right away that you should pay attention to this: we will draw in white, so the only thing that matters is the luminosity set at 100%. To make a stroke inside the text, just reduce the shadow size:

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

Add a few more strokes, varying 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 shape and enhance the shade, 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 to, you can add a couple more external touches. As a result, we get the following effect of a 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 will 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 a regular 3D text (you can additionally play with transparency). Pay attention to a small leap in lordship in the middle - this helps to make a small risk in the middle of the text (try increasing lordship to make it 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 it a bigger shape, I’ll add a shadow on top, basically repeating the shape of the source text:

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

Finally, similar to the bottom, let's add an upper 3D shadow, but lighter and more transparent (to increase sharpness, the topmost shadow is made slightly less transparent than the rest):

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 with shades and saturation, for example, making the bottom red and the top blue, or something else ...

Internet explorer

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