How to Use Multiple Text Shadows in CSS

A small CSS trick: you can use multiple text-shadows on a text by comma separating them:

<!-- You can use multiple text shadows by comma separating them -->
<style>
    span {
        color: #FFF;
        font-size: 120px;
        font-weight: bold;
        text-shadow: -3px -3px 0 #FB01FC, 3px 3px 0 #04FBF6;
    }
</style>

<span>ERROR</span>

The example above, will produce the following text:

If you were wondering, the different values for text-shadow are as follow:

1. value: Represents the X coordinate of the shadow.
2. value: Represents the Y coordinate of the shadow.
3. value: Sets the amount of blur to be used for the shadow.
4. value: Lastly, you can specify the color of the shadow.

Note that you can also use RGBA values for colors to create semi-transparent shadows.

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The text-shadow property in CSS