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-y, and two are optional, the
/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px green;
Let’s go over how to define each value.
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.
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-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 */