The text-shadow CSS Property

Adding Drop Shadows to Text with CSS

Prefer to watch a video? This article is a companion piece to my Decoded by Christina series on YouTube.

When adding CSS styles to text on an HTML page, it’s usually best to keep it subtle, to make sure that the content on your page is easy to read. But sometimes you may want to make a small block of text stand out a little more than the rest. In this post, I’ll go over how to use the text-shadow CSS property to add a drop shadow to your text.

There are some basic ways to make your text stand out. You can make it bold, change the color, or use different font-sizes. Another option is to use the text-shadow property to add a drop shadow. There are four values used with this property. Two are required, the offset-x and offset-y, and two are optional, the blur-radius and color value.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px green;

Let’s go over how to define each value.

offset-x and offset-y

The offset-x value determines how far away, from the element, the shadow will appear on the x-axis, which runs left to right. The second value, the offset-y, determines the distance of the shadow on the y-axis, which runs top to bottom.

These values can be defined with any <length> data type, which is a number followed by any unit used to represent a distance value (e.g. px, em, rem or a percentage). Also, when using a property with multiple values, each has to be separated by a space.

/* offset-x | offset-y */
text-shadow: 2px 2px;

Since both the offset-x and offset-y values are required, if you add only value, you won't see any change. But if you only want a shadow on the x-axis, then set the offset-y value to 0 or vice versa.

text-shadow: 2px 0px; /* will only show the shadow on the x-axis */
text-shadow: 0px 2px; /* will only show the shadow on the y-axis */