How to Use Multiple Text Shadows in CSS

Ferenc Almasi • 2020 November 22 • 📖 1 min read

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>

text-shadows.html

Copied to clipboard!

The example above, will produce the following text:

ERROR

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

value: Represents the X coordinate of the shadow.
value: Represents the Y coordinate of the shadow.
value: Sets the amount of blur to be used for the shadow.
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.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

10 Best Practices for Quickly Improving Your CSS

Building scalable and manageable stylesheets

CSS 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.

Resources:

The text-shadow property in CSS

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

How to Use Multiple Text Shadows in CSS

10 Best Practices for Quickly Improving Your CSS

Building scalable and manageable stylesheets

Resources:

Want to get webtips to your mailbox? 📬

Tired of looking for tutorials?

Recommended

How to Vertically Align Text in CSS

How to Use Variables in CSS

How to Truncate Text With Ellipsis in CSS