πŸŽ„ Get 50% off from our JavaScript course for the holidays! πŸŽ„
How to Use Multiple Text Shadows in CSS

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:

  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.

How to use multiple text shadows in CSS
If you would like to see more Webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course
10 Best Practices for Quickly Improving Your CSS

Resources:

JavaScript Course Dashboard

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

Recommended

πŸŽ‰ Thank you for subscribing to our newsletter. x