Creating Four Very Cool Text Effects Using the CSS Text Shadow Property

The CSS text shadow property can be used for many great styling embellishments, and this quick tutorial shows you how to use it to make four effects that you will use again and again.

The four effects made possible by the CSS text shadow property that are covered in this helpful video tutorial are 3D text, Retro text, Inset text and Raised text. Each has its own appeal and applications, and each is just as simple to implement as the next. Let’s take a look at each example featured in the lesson.

The first effect we will look at is 3D text. In the code below you can see that a custom is being used, which requires use of the font-family property. Also being used is the color: rgba declaration that allows you to incorporate opacity settings into your color settings. The idea here is to first add you main text and then add a slightly offset instance of the same text to create the 3D effect.

#ts1 {
    font-family: "Paytone One", sans-serif;
    background: url(noise.png)
}

#ts1 span {
    color: rgba(255, 0, 0, 0.4);
    text-shadow: 8px 0 0 rgba(0, 0, 255, 0.3);
}

Next is the Inset text effect. As you will see in the code below, it is the 1 pixel offset coloring of the text shadow that makes this effect work.

#ts2 {
    font-family: Impact, sans-serif;
    background: #525252
}

#ts2 span {
    color: #161616;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

The next effect covered is the Retro style effect. It is the extra layer in the text shadow that creates the pencil-thin highlight effect and makes that text pop.

#ts3 {
    font-family: 'Lobster', cursive;
    background: #ad2960
}

#ts3 span {
    color: #f9c90f;
    text-shadow: 3px 3px 0 #ad2960,
                 5px 5px 0 rgba(255, 255, 255, 0.4);
}

The last effect covered in this CSS tutorial is Raised text. It is, of course, the extra text shadow layers that account for the highlight effect that seems to lift the main text away from the background.

#ts4 {
    font-family: 'Ubuntu', sans-serif;
    background: #161616;
}

#ts4 span {
    color: #787878;
    text-shadow: 0 1px 0 #333,
                 0 2px 0 #333,
                 0 3px 0 #333,
                 0 4px 0 #333,
                 0 5px 0 #333,
                 0 6px 0 #333,
                 0 7px 5px rgba(0, 0, 0, 0.5);
}

We hope you have found this CSS tutorial to be helpful. Before you leave, make sure you also check out this post on how to use custom fonts in your projects. Thanks for stoppin by!