While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
You can help us out by using the “report an issue” button at the bottom of the tutorial.
The CSS text-shadow property is similar to the box-shadow property, but the shadow is applied to each letter instead of the boundaries of the element:
text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
The values go in this order: offset-x offset-y blur-radius color
.
You can also define multiple shadows:
text-shadow: 45px 25px 4px rgb(25,93,229),
25px 15px 1px rgb(25,93,229);
Note that, as with the box-shadow
property, you can define multiple comma-separated shadows. Unlike with box-shadow
however, you can’t define a spread value or use the inset
keyword for text shadows. There are ways to create a text shadow that looks like an inset shadow, but the shadow itself won’t actually be inset.
Result
Here’s the result of the 2 text shadows from the above snippet:
I’m just some text in the world with a basic shadow.
I’m just some text in the world with two shadows.