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 and 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.
— Sorry to interrupt this program! 📺
Are you interested in learning Vue.js? If so, I highly recommend you try The Vue.js Master Class course by Vue School. Learning from a premium resource like that is a serious investment in yourself.
Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏
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.