How to Create Block Text Using the CSS Text-Shadow Property

Helping you create visual contrast and intrigue without using a million different fonts.

Screenshot by author

While building anew project, I wanted to create some contrast with my homepage h1 without mixing too many fonts. I personally find it annoying when sites go “font crazy” because my eyes start to focus on the style of the text rather than the content itself. My first step was to look through the available Google fonts but I didn’t find any “hallow” text fonts which I was keen to use. After much searching, I realized that the text-shadow property could actually achieve exactly what I was looking for.

Below are the final CSS elements used to create the title you see above. If you would like a deeper dive into the text-shadow property, please continue reading to the end of the article.

TL;DR — Final Code

In a rush and need the final code? Here it is…

Above is the HTML for our text.

Above is the final CSS code for our title.

Breaking Down text-shadow

Before I start explaining the rest of my CSS in the .title selector, let’s take a look at the basic makeup of text-shadow.

As the name suggests, thetext-shadow property in CSS adds a shadow to the text. At a minimum, text-shadow has two values which represent the horizontal and vertical values, respectively. Optional values for text-shadow include a blur value and a color value. We will start looking at different examples of text-shadow using horizontal, vertical, and color values. This will make it easier to distinguish the shadow from the original text.

It is important to note that the text-shadow property is creating a duplicate of the entire text and just shifting it horizontally or vertically based on the values you provide. Let’s see this in action:

Code generated using W3Schools’ code editor.

In the code above, we see that the horizontal value for the text-shadow is set to 300px, the vertical value is set to 0px, and the color value set to red. This example, while exaggerated, shows how text-shadow creates a duplicate of our text and aligns it to our specifications. The result is a redtext-shadow that is shifted 300px horizontally and 0px vertically.

Positive and Negative Values

The next thing to know about the horizontal and vertical values for text-shadow is that they can be either positive or negative. A positive pixel value will shift horizontal values to the right while shifting vertical values down.

If we adjust our code to include a vertical value of 100px, we can see that our shadow is now 100px below the original text.

The text-shadow has both a positive horizontal value (300px) and a positive vertical value (100px). This shifts the text-shadow 300px to the right and 100px below the original text. Code generated using W3Schools’ code editor.

If we change our horizontal and vertical values to be negative, our shadow will shift left and up. Let’s implement a few changes and see how this works in our code below.

The text-shadow has both a negative horizontal value (-200px) and a negative vertical value (-50px). This shifts the text-shadow 200px to the left and 50px above the original text. Code generated using W3Schools’ code editor.

Now, our shadow (red) is -200px to the left and -50px above our original text.

Below is a simple chart to help you visualize how positive and negative horizontal and vertical values alter the placement of the text-shadow.

The diagram above shows where the text-shadow will appear depending on the positive and negative horizontal/vertical values. Diagram by author

Blur Value (optional)

The blur value is an optional third value that can be added to the text-shadow. This value, like the horizontal and vertical values, is represented in px. The lower the blur pixel value, the sharper the image, and vice versa. As the blur px value increases, the text-shadow becomes more spread out and opaque.

The above screenshot shows a text-shadow with a 2px blur value. Code generated using W3Schools’ code editor.

On the left is the original text with the blur value as content. To the right is the resulting text-shadow with the aforementioned blur value.

Color Value (optional)

Color is the fourth optional value available to a text-shadow property. You do not need to include a blur value in order to assign a color value in your text-shadow property, you can simply assign text-shadow values for horizontal, vertical, and color. However, it is best practice to include a 0 or 0px if you choose not to assign the blur value to a text-shadow.

Additionally, a color can be written as a text value, such as white, or it can be written in its corresponding hex code (#ffffff) or decimal code (rgb(255,255,255)) value.

The screenshot above assigns a color value of #ffc0cb to our text-shadow. We would get the same results if we had given the color a value of “pink” or rgb(100,75,80). Code generated using W3Schools’ code editor.

Adding Multiple Text-Shadows

In addition to the four core values — horizontal, vertical, blur, and color — text-shadow allows us to create multiple shadows with their own unique properties.

To add more than one text-shadow, simply add another line of horizontal, vertical, blur, and color values. Each additional line of core values should be separated by a comma and ideally placed on a separate line. See the example below where we use two text-shadow properties to create a 3D effect in our text.

This example includes two text-shadow properties to create a 3D text effect. Code generated using W3Schools’ code editor.

If we play up the blur effect and leave the horizontal and vertical values at 0, we can create a glowing neon light effect!

Code generated using W3Schools’ code editor.

Finally…Creating Block Text!

Now that we’ve covered the basics, creating the block title text at the beginning of this article doesn’t seem so hard. Below is a breakdown of what each line in CSS is doing, apart from the text-shadow — we will go over that step-by-step!

Breakdown of CSS code for creating block text. Diagram by author.

Text-Shadow: Line #1

In the first line of our text-shadow, we are creating a small shadow that is shifted -1px horizontally and 1px vertically, placing the shadow to the bottom-left of the original text. The color value for this shadow is a pale violet. Below is what the title looks like with just the first line in the text-shadow.

Only the first line in our text-shadow is being applied in our CSS code.

This is what the title looks like with just the first line in our text-shadow code.

Text-Shadow: Line #2

The second line in our text-shadow is creating a shadow that is shifted 1px horizontally and 1px vertically, placing the shadow to the bottom-right of the original text. With these two lines, we are halfway to our full block text effect!

Text-Shadow: Line #3

The third line of our text-shadow is creating a shadow that is shifted 1px horizontally and -1px vertically which places it to the top-right of the original text.

With just these three lines of our text-shadow set, it's tempting to think we are done, but we aren’t! If you think about what we have done so far in terms of our diagram, we have created shadows in three of our four quadrants and are missing the top-left quadrant (negative horizontal and negative vertical value).

The positive/negative diagram shows us our progress so far in our text-shadow property. With the first three lines of code set, we are just missing the top-left quadrant.

Text-Shadow: Line #4

Our final line in our text-shadow property completes the block text effect by adding a shadow that is shifted -1px horizontally and -1px vertically, placing the shadow to the top-left of the original text.

Full text-shadow code for our block text effect is here!

Our block text is complete — yay!!!

Conclusion

If you’ve stuck with me for this long, way to go! Not only have you mastered the art of thetext-shadow property in CSS but you also created some awesome block text that is perfect for your next project.

Thanks for reading. If you found this article useful, please leave a comment and/or a clap!