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…